Jump to content

Template Nation

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

Template Nation's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Template Nation
    Template Nation joined the community
  2. Template Nation
    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.
×
×
  • Create New...