मैं इस तरह के लिंक के रूप में छवि गैलरी बनाने की कोशिश कर रहा हूँ:

https://codepen.io/robgolbeck/pen/MagWRw

वह एचटीएमएल कोड है:

<section class="portfolio-container group">
    <ul class="portfolio-list group">
            <li>
                    <a href="#">
                            <img src="http://robgolbeck.com/demos/hover-overlay/images/thumb1.jpg">
                    </a>
            </li>

</ul>

और सीएसएस कोड है:

   .portfolio-container,
   .portfolio-list {
      width: 100%;
    }

  .portfolio-list {
       margin: 0;
       padding: 0;
        list-style: none;
  }

    .portfolio-list li {
        position: relative;
       display: block;
       float: left;
       width: 20%;
  }

.portfolio-list li img {
       display: block;
       width: 100%;
      margin: 0;
      vertical-align: top;
  }

 .portfolio-list a:after {
       content: '\A';
       position: absolute;
       width: 100%;
      height: 100%;
      top: 0;
      left: 0;
       background: rgba(0, 0, 0, 0.6) url(http://robgolbeck.com/demos/hover-
     overlay/images/happy.png) center center no-repeat;
      opacity: 0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
   }

  .portfolio-list a:hover:after {
       opacity: 1;
    }

   @media all and (max-width: 1080px) {
       .portfolio-list li {
              width: 25%;
      }
    }

   @media all and (max-width: 879px) {
        .portfolio-list li {
            width: 33.3333333%;
     }
   }

   @media all and (max-width: 560px) {
          .portfolio-list li {
            width: 50%;
        }
    }

 @media all and (max-width: 480px) {
      .portfolio-list li {
            width: 70%;
             float: none;
            clear: both;
            margin: 0 auto;
    }
   .portfolio-list a:after {
         width: 100%;
       }
.portfolio-list li img {
            width: 100%;
            margin: 0 auto;
    }
  }

  .group:before,
   .group:after {
       content: "";
        display: table
   }

   .group:after {
       clear: both
  }

   .group {
       zoom: 1
    }

लेकिन हैप्पी.पीएनजी फोटो के बजाय मैं प्लस फॉन्टॉसम आइकन या इमेज जोड़ना चाहता हूं मैं यह कैसे कर सकता हूं?

2
Honey 21 जुलाई 2017, 13:50

3 जवाब

सबसे बढ़िया उत्तर

इसे देखो:

.portfolio-container,
   .portfolio-list {
      width: 100%;
    }

  .portfolio-list {
       margin: 0;
       padding: 0;
        list-style: none;
  }

    .portfolio-list li {
        position: relative;
       display: block;
       float: left;
       width: 20%;
  }

.portfolio-list li img {
       display: block;
       width: 100%;
      margin: 0;
      vertical-align: top;
  }

 /*.portfolio-list a:after {
       content: '\A';
       position: absolute;
       width: 100%;
      height: 100%;
      top: 0;
      left: 0;
       background: rgba(0, 0, 0, 0.6) url(http://robgolbeck.com/demos/hover-overlay/images/happy.png) center center no-repeat;
      opacity: 0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
   }*/
    .portfolio-list a:after {
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6) center center no-repeat;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    content: '\f067';
    font-family: FontAwesome;
    font-size: 30px
    }

  .portfolio-list a:hover:after {
       opacity: 1;
    }

   @media all and (max-width: 1080px) {
       .portfolio-list li {
              width: 25%;
      }
    }

   @media all and (max-width: 879px) {
        .portfolio-list li {
            width: 33.3333333%;
     }
   }

   @media all and (max-width: 560px) {
          .portfolio-list li {
            width: 50%;
        }
    }

 @media all and (max-width: 480px) {
      .portfolio-list li {
            width: 70%;
             float: none;
            clear: both;
            margin: 0 auto;
    }
   .portfolio-list a:after {
         width: 100%;
       }
.portfolio-list li img {
            width: 100%;
            margin: 0 auto;
    }
  }

  .group:before,
   .group:after {
       content: "";
        display: table
   }

   .group:after {
       clear: both
  }

   .group {
       zoom: 1
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="portfolio-container group">
    <ul class="portfolio-list group">
            <li>
                    <a href="#">
                            <img src="http://robgolbeck.com/demos/hover-overlay/images/thumb1.jpg">
                    </a>
            </li>

</ul>
0
vishnu 21 जुलाई 2017, 14:02

बस इस साइट का उपयोग करें :) सरल और तेज़ तरीका। फ़ॉन्ट को एक छवि बनाएं।

नमूना - fa फ़ुटबॉल

enter image description here

फा प्लस

enter image description here

आप अपने खुद के आकार बना सकते हैं। तब आप उस छवि का उपयोग कर सकते हैं।

उदाहरण: (मेरे द्वारा अपलोड की गई छवि)

.portfolio-container,
.portfolio-list {
  width: 100%;
}

.portfolio-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolio-list li {
  position: relative;
  display: block;
  float: left;
  width: 20%;
}

.portfolio-list li img {
  display: block;
  width: 100%;
  margin: 0;
  vertical-align: top;
}

.portfolio-list a:after {
  content: url(http://sk.uploads.im/t/IcAC1.png);
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6) center center no-repeat;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-list a:hover:after {
  opacity: 1;
}

@media all and (max-width: 1080px) {
  .portfolio-list li {
    width: 25%;
  }
}

@media all and (max-width: 879px) {
  .portfolio-list li {
    width: 33.3333333%;
  }
}

@media all and (max-width: 560px) {
  .portfolio-list li {
    width: 50%;
  }
}

@media all and (max-width: 480px) {
  .portfolio-list li {
    width: 70%;
    float: none;
    clear: both;
    margin: 0 auto;
  }
  .portfolio-list a:after {
    width: 100%;
  }
  .portfolio-list li img {
    width: 100%;
    margin: 0 auto;
  }
}

.group:before,
.group:after {
  content: "";
  display: table
}

.group:after {
  clear: both
}

.group {
  zoom: 1
}
<section class="portfolio-container group">
  <ul class="portfolio-list group">
    <li>
      <a href="#">
        <img src="http://robgolbeck.com/demos/hover-overlay/images/thumb1.jpg">
      </a>
    </li>

  </ul>

अगर फॉन्ट कमाल के आइकॉन का इस्तेमाल कर रहे हैं तो,

content: '\f067';
font-family: FontAwesome;

कक्षा के लिए .portfolio-list a:after

आशा है कि इससे सहायता मिलेगी।

1
Hash 21 जुलाई 2017, 14:26

आप कुछ ऐसा कर सकते हैं

.portfolio-list a:after {
    content: '\f067';
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6) center center no-repeat;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
0
Tomislav Svecak 21 जुलाई 2017, 13:58