Image onClick

for creme21

by Jens Kühn

HTML

<a class="project-link" href="#" onClick="alert('Link Base'); return false;">
     <img width="220" height="190" 
src="https://image.shutterstock.com/image-vector/home-icon-estate-premium-house-600w-716338615.jpg" 
alt="Quality estate">
     <span class="project-overlay">View Details</span>
     <div class="project-content">
         <h3 class="project-caption">Quality estate</h3>
         <img class="view-button" 
src="https://www.seekpng.com/png/detail/254-2548765_more-details-button-png-contact-us.png" 
onClick="alert('Link Plus'); return false;">
     </div>
</a>

CSS

.project-link { position: relative; display: block; overflow: hidden;
-webkit-transform: translate3d(0, 0, 0); /* Prevent the thumbnails from flickering on hover */ }
     .project-link img { display: block; }
     .project-link .project-content { width: 220px; height: 190px;
position: absolute; overflow: hidden; top: 0; left: 0; }
     .project-link .project-overlay { opacity: 0; cursor: pointer; /* opera */ }
     .project-link .project-overlay, .blocked-project-overlay {
background-image: url('images/layout/project-overlay.png'); position: 
absolute; left: 0; top: 0; display: block; width: 100%; height: 190px;
text-indent: -9999px; }
     .project-link .view-button { position: relative; display: block;
width: 41px; height: 41px; margin: 20px auto 0; }
     .project-link .project-caption { position: relative; font-family: 
"Yanone Kaffeesatz", Arial, Helvetica, sans-serif; font-size: 15px;
letter-spacing: 0.1em; text-align: center; padding: 9px 7px 8px 7px;
margin: 20px 0 0 0; background: #4c4c4c; background: rgba(255, 255, 255, 0.1); text-transform: uppercase; width: 206px; color: #999; border: 1px solid rgba(0, 0, 0, 0.3); border-width: 1px 0; }