Best clickable image on link hover code

Here is a light weight code snippet, so you can show an image when hovering a link on your website. The image is clickable and absolute positioned in relativity to the link holder. You can use multiple links on the same page just by adding the corespondent class to the link and the image that you want to be showed when making hover over the link.

This is purely a CSS solution and it does not include any javascript, jQuery or any other library at all. Please feel free to use it in your website projects for you or your clients.

Copy & Paste the CSS code below into the HEAD of your page:

<style> a.demo_img { display: block; width:300px; position:relative; line-height:25px; } a.demo_img>div { position:absolute; padding:0; margin:0; left: 155px; /* change this value to one that works best for you */ top: -18px; /* change this value to one that works best for you */ background: transparent url(https://mindfulseo.com/placeholder.jpg) left 23px no-repeat; opacity:0; height: 0; overflow: hidden; /* Enable transitions */ /*-webkit-transition: all .3s ease .15s; -moz-transition: all .3s ease .15s; -o-transition: all .3s ease .15s; -ms-transition: all .3s ease .15s; transition: all .3s ease .15s;*/ } a.demo_img>div img { padding:8px; margin-left:4px; border:1px solid #BCBDC0; background-color:#BCBDC0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } a.demo_img:hover>div { opacity:1; height: 200px; padding: 8px; z-index:1; } </style><noscript><a href="https://mindfulseo.com/seo">by Los Angeles SEO Expert - Mindful SEO</a></noscript>

Copy & Paste the HTML code below into the BODY of your page:

<a href="#" class="demo_img"target="_blank">long text link <div><img src="https://mindfulseo.com/placeholder.jpg" alt="" /></div> </a> <a href="#" class="demo_img" > link <div><img src="https://mindfulseo.com/placeholder.jpg" alt="" /></div> </a> <a href="#" class="demo_img"target="_blank"> Short link <div><img src="https://mindfulseo.com/placeholder.jpg" alt="" /></div> </a> <a href="#" class="demo_img"target="_blank"> My hover image text just in case <div<noscript><a href="https://mindfulseo.com/seo">by Los Angeles SEO Expert - Mindful SEO</a></noscript>

 

OR

 

Copy & Paste the CSS code below into the HEAD of your page:


<style> /* HOVER THUMBNAILS - BEGIN */ @media screen and (min-width: 1250px) { span.pajzs { width: 500px; height: 450px; } .pajzsText { width: 500px; padding-top: 120px; font-size: 100px; } .PajzsMiddle { width: 375px; height: 300px; } .PajzsBottom { border-left: 188px solid transparent; border-right: 188px solid transparent; } .PajzsLeft { border-top: 400px solid rgba(206, 89, 55, 0.95); } .PajzsRight { border-top: 400px solid rgba(206, 89, 55, 0.95); } #wrapPajzsok { width: 730px; height: 730px; } span.pajzs:hover .PajzsMiddle { width: 415px; } span.pajzs:hover .PajzsBottom { border-left: 207px solid transparent; border-right: 207px solid transparent; margin-left: 30px; } #pajzsJS, #pajzsCSS { top: 275px; } div.pajzsMenu { top: -230px; } div.pajzsMenu ul li a { padding: 0 10px; } } @media screen and (max-width: 25em) { .codrops-header { font-size: 75%; } .codrops-icon span { display: none; } } .hoverThumbGrid { color: #536d76; font-weight: 400; font-size: 1em; font-family: 'Raleway', Arial, sans-serif; overflow: hidden; margin: 0; padding: 1em 0 0 0; width: 100%; list-style: none; text-align: center; } /* Common style */ .hoverThumbGrid figure { position: relative; z-index: 1; display: inline-block; overflow: hidden; margin: -0.135em; width: 33.333%; height: 400px; background: #3085a3; text-align: center; cursor: pointer; } .hoverThumbGrid figure img { position: relative; display: block; width: 100%; min-height: 100%; opacity: 0.8; } .hoverThumbGrid figure figcaption { padding: 0.1em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hoverThumbGrid figure figcaption::before, .hoverThumbGrid figure figcaption::after { pointer-events: none; } .hoverThumbGrid figure figcaption, .hoverThumbGrid figure a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .hoverThumbGrid figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .hoverThumbGrid figure h2 { word-spacing: -0.15em; font-weight: 300; } .hoverThumbGrid figure h2 span { font-weight: 800; } .hoverThumbGrid figure h2, .hoverThumbGrid figure p { margin: 0; } .hoverThumbGrid figure p { letter-spacing: 1px; font-size: 68.5%; } .footer img { vertical-align: bottom; } /* Individual effects */ /*---------------*/ /***** Sadie *****/ /*---------------*/ figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); } figure.effect-sadie h2 { position: absolute; top: 33%; left: 0; background: rgba(255,255,255,0.9); width: 100%; text-shadow: 2px 2px 60px #FFF; color: #000; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } figure.effect-sadie figcaption::before, figure.effect-sadie p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure.effect-sadie p { position: absolute; bottom: 0; left: 0; padding: 2em 5px; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } figure.effect-sadie:hover h2 { color: #fff; background: rgba(0,0,0,0.2); text-shadow: none; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); } figure.effect-sadie:hover figcaption::before , figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } @media screen and (max-width: 69.5em) { .hoverThumbGrid figure { width: 50%; height: 250px; } .hoverThumbGrid figure figcaption { font-size: 90%; } } @media screen and (max-width: 41.5em) { .hoverThumbGrid figure { width: 100%; } } /* HOVER THUMBNAILS - END */ @media screen and (max-width: 736px) { #wrapPajzsok { display: none; } } </style><noscript><a href="https://mindfulseo.com/seo">by Los Angeles SEO Expert - Mindful SEO</a></noscript>

Copy & Paste the HTML code below into the BODY of your page:


<div class="hoverThumbGrid"> <figure class="effect-sadie"> <img src="https://mindfulseo.com/placeholder.jpg" alt="placeholder"/> <figcaption> <h2>Your loerm ipsum here <span>Here</span></h2> <p>Your loerm ipsum here <br />Your loerm ipsum here.</p> <a target="_blank" href="https://mindfulseo.com/seo">Mindful SEO Los Angeles</a> </figcaption> </figure> <figure class="effect-sadie"> <img src="https://mindfulseo.com/placeholder.jpg" alt="placeholder"/> <figcaption> <h2>Your loerm ipsum here <span>Here</span></h2> <p>Your loerm ipsum here <br>Your loerm ipsum here.</p> <a target="_blank" href="https://mindfulseo.com/seo">Mindful SEO Los Angeles</a> </figcaption> </figure> <figure class="effect-sadie"> <img src="https://mindfulseo.com/placeholder.jpg" alt="placeholder"/> <figcaption> <h2>Your loerm ipsum <span>Here</span></h2> <p>Your loerm ipsum here <br />Your loerm ipsum here.</p> <a target="_blank" href="https://mindfulseo.com/seo">Mindful SEO Los Angeles</a> </figcaption> </figure> <figure class="effect-sadie"> <img src="https://mindfulseo.com/placeholder.jpg" alt="placeholder"/> <figcaption> <h2>Your loerm ipsum <span>Here</span></h2> <p>Your loerm ipsum here: <br>Your loerm ipsum here Your loerm ipsum here etc.</p> <a href="https://mindfulseo.com/seo">Mindful SEO Los Angeles</a> </figcaption> </figure> </div>><noscript><a href="https://mindfulseo.com/seo">by Los Angeles SEO Expert - Mindful SEO</a></noscript>