Jump to content

Adding Hover effect to image grid


Template Nation
 Share

Recommended Posts

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...