Template Nation

September 27, 2020

I am creating a website and i want to add Hover effect to each image in the below image grid by loading another image and text on the hover. How do i do that?

Below is my code.

  <html>
  <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 0px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 2 10px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 25px;
}

.column img {
  margin-top: 20px;
 border: 2px solid #ccc;
 border-radius: 3px;
 vertical-align: middle;
  width: 100%;
  cursor: pointer;
  
}

 

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
</style>
    </head>
<body>

 

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
     <img alt="FLATBLOG" src="https://1.bp.blogspot.com/-ElDnvC4n-w0/X2dIoPpolgI/AAAAAAAAAMY/X_ksLjitOV4YPcoxc0wFwPyK2hOhOBH5gCLcBGAsYHQ/s0/FlatBlog.png" style="width: 100%;" />
    <img alt="SUPERFAST" src="https://1.bp.blogspot.com/-XUkeU8i1pto/X2Y7QX7YuRI/AAAAAAAAAL0/BtTOuONCufIGiRn2HOwBlwm2YWYykRphwCLcBGAsYHQ/s0/Superfast.png" style="width: 100%;" />
    <img alt="ULTRAMAG" src="https://1.bp.blogspot.com/-QZQNA0JptfU/X29o6GYYGWI/AAAAAAAAAO4/eqD9AxRkbuQg6BCSazgfjVgIHOVb-aoYACLcBGAsYHQ/s0/Screenshot_253_804x904.png" style="width: 100%;" />
     
    </div> 
  </div>
  <div class="column">
    <img alt="KOVID" src="https://1.bp.blogspot.com/-RDQvnq9mTdE/X2dQwNNPJsI/AAAAAAAAAM4/nkhyR7PU1rkSWZxIL-O3X08T5OpITNBdwCLcBGAsYHQ/s0/Screenshot%2B%2528237%2529.png" style="width: 100%;" />
    <img alt="EASYCART" src="https://1.bp.blogspot.com/-nYLTBt3eaRg/X29mSqO6ylI/AAAAAAAAAOs/uXnKphwRyPIzgyhTLYCHhXJfeNJ5e-RswCLcBGAsYHQ/s0/Screenshot%2B%2528243%2529.png" style="width: 100%;" />
    <img alt="VECTOR" src="https://1.bp.blogspot.com/-z4MgYn29YEI/X29p0lnvU5I/AAAAAAAAAPA/mpyAgoJ8jWAL09AJPBifxHJZPt4quRudgCLcBGAsYHQ/s0/Screenshot_259_804x904.png" style="width: 100%;" />
     
       
  </div>  
  
  <div class="column">
    <img alt="PUBLISTER" src="https://1.bp.blogspot.com/-PKfxOT_7l5s/X2Y56_jE5nI/AAAAAAAAALc/kk31Kc51dUY-mN56cazF4LmvIMnfLxfxgCLcBGAsYHQ/s0/Publister.png" style="width: 100%;" />
    <img alt="SAASBLOG" src="https://1.bp.blogspot.com/-azb4Z6Su_o0/X2dRuL2nCWI/AAAAAAAAANA/6h11DE85WVoPDVJ950ZuvKzM7ztOdJApQCLcBGAsYHQ/s0/Screenshot%2B%2528238%2529.png" style="width: 100%;" />
    <img alt="SEOMAG" src="https://1.bp.blogspot.com/-0p6Eu9CuARk/X29zagr2UHI/AAAAAAAAAPg/A0k4N4MC3gACb2R1orYat9D3TWDBgAt5gCLcBGAsYHQ/s0/Screenshot_262_804x904.png" style="width: 100%;" />
     
     
  </div>  
  
  <div class="column">
    <img alt="NEEDMAG" src="https://1.bp.blogspot.com/-IRuPcCYUx14/X2dLJ9wtOXI/AAAAAAAAAMs/er5Y4Us52T4y17ESiZ9esS-bDsPI-V2wwCLcBGAsYHQ/s0/Screenshot%2B%2528232%2529.png" style="width: 100%;" />
    <img alt="MINIBOX" src="https://1.bp.blogspot.com/-e9035bUQuTo/X2dZnCMy6RI/AAAAAAAAANk/EmmUrCCN8LMDcSQjTUBk03iVcoP6nJgYgCLcBGAsYHQ/s0/Screenshot%2B%2528245%2529.png" style="width: 100%;" />
    <img alt="BASIL PORTFOLIO" src="https://1.bp.blogspot.com/-eEGkbFdjpDE/X29zDQOGErI/AAAAAAAAAPY/kjXNj8ij1u4a7lIpvHDYw__EsnGV5mqGgCLcBGAsYHQ/s0/Screenshot_271_804x904.png" style="width: 100%;" />
     
  
</div>
</body>
</html>

Any help would be appreciated.

Sign In

Template Nation

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by Template Nation

Adding Hover effect to image grid

Browse

Activity