• James posted an update 1 year, 2 months ago

    This took me forever to work out so I thought that I might as well share it with you guys!

    In this quick post I will be showing you how to make a thumbnail image zoom and display an overlay over the top of it when a user hovers over it with his mouse!

    So lets dive straight in… I have added various comments to my code to help you understand what is going on and why!

    For some stupid reason buddypress will not allow me to post raw html within code tags without buddypress converting it straight into actual html. However the basic layout is just in this order…
    post-thumbnail-container-padding
    post-thumbnail
    thumbnail image goes here
    post-overlay-container
    post-overlay
    entry-content-thumb-content

    Something very important to know about when doing this is that I made sure to have my overlay “entry-content-thumb-content” below my thumbnail image this is because if it is in front then the users mouse will be blocked from and the overlay will not appear.

    Here is my css:

    .post-thumbnail-container-padding {
    position: relative;
    width: 100%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    }

    .post-thumbnail {
    position: relative;
    width: 100%;
    height: 180px; /* This is an important number as you will need to match it with your overlay so everything fits nicely*/
    max-height: 180px;
    overflow: hidden; /* Makes sure to hide anything too big*/
    }

    .post-thumbnail-container-padding {
    position:relative;
    float:left;
    width:100%;
    height:180px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    }

    /* this positions the overlay where it should be!*/
    .post-overlay-container {

    position: absolute;
    height: 180px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    }

    /* What is inside the overlay*/
    .entry-content-thumb-content {
    display:none; /* When user is not hovering over the thumbnail make sure to display:none*/
    position: relative;
    width: 100%;
    float: left;
    height: 180px;

    }

    /* This css makes "entry-content-thumb-content" display if user is hovering over the thumbnail image! */
    .post-thumbnail:hover .entry-content-thumb-content {

    display:block !important;
    background-color: rgba(255, 255, 255, 0.8); /*this is the color of the overlay when hover over on blog posts thumbnails */

    }

    /* This code is used for the zoom effect when the user hovers over the thumbnail image*/

    /* This chunk of css makes sure that the zoom effect does not expand outside of the div and if it does overflow then it gets hidden*/
    .post-thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
    height:180px;
    max-height:180px;
    }

    /* The speed the browser will tkae to increase the size of the image*/
    .post-thumbnail img {
    max-width: 100%;

    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    }

    /*This css is for how big the image should zoom/expand!*/

    .post-thumbnail:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    }


    • overlay-text-on-zoom-image
      overlay-text-on-zoom-image