Adding a 2px border between images in a grid with hover to show text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Adding a 2px border between images in a grid with hover to show text

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Grid Example</title> 
  <style>
* {<!--  w ww.j a  va2s  . c om-->
   box-sizing:border-box;
}

body {
   margin:0;
}

.cbp-rfgrid {
   margin:0 0 0 0;
   padding:0;
   list-style:none;
   position:relative;
   width:100%;
}

.cbp-rfgrid li {
   position:relative;
   float:left;
   overflow:hidden;
   width:34.3333334%;
   width:-webkit-calc(100% / 4);
   width:calc(100% / 4);
   border:3px solid Chartreuse;
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
   display:block;
   width:100%;
   cursor:pointer;
}

.cbp-rfgrid li a img {
   max-width:100%;
}

.cbp-rfgrid li a div {
   position:absolute;
   left:0px;
   top:0px;
   right:0px;
   bottom:0px;
   background:yellow;
   display:-webkit-flex;
   display:-moz-flex;
   display:-ms-flex;
   display:flex;
   -webkit-align-items:center;
   -moz-align-items:center;
   -ms-align-items:center;
   align-items:center;
   text-align:center;
   opacity:0;
}

.cbp-rfgrid li a:hover div {
   opacity:2;
}

.cbp-rfgrid li a div h3 {
   width:100%;
   color:blue;
   padding:0 11px;
}

@media (max-width: 767px) {
   .cbp-rfgrid li a div h3 {
      font-size:3.376em;
   }

}

@media (min-width: 768px) {
   .cbp-rfgrid li a div h3 {
      font-size:4.376em;
   }

}

@media screen and (max-width: 767px)  {
   .cbp-rfgrid li {
      width:100%;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <ul class="cbp-rfgrid"> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
     <div> 
      <h3>Bukau</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
     <div> 
      <h3>Noriko Olling</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/Opera.png"> 
     <div> 
      <h3>Erba</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
     <div> 
      <h3>Raiso Japan</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
     <div> 
      <h3>Aaltoin</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png"> 
     <div> 
      <h3>Bukau</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
     <div> 
      <h3>Noriko Olling</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/Opera.png"> 
     <div> 
      <h3>Erba</h3> 
     </div> </a> </li> 
   <li> <a href="#"> <img src="https://www.java2s.com/style/demo/Safari.png"> 
     <div> 
      <h3>Raiso Japan</h3> 
     </div> </a> </li> 
   <!-- ... --> 
  </ul>  
 </body>
</html>

Related Tutorials