Grow your CSS skills. Land your dream job.

Image Hover link question

  • # June 25, 2013 at 2:12 pm

    Hi everyone.

    I recently purchased a template and I dislike the way images are linked to lightbox. When I hover over the image i get the options to click to open a project details page, or the enlarged image in lightbox .I would like to remove the title and the link to the project and have the full thumb act as a link to the lightbox. If that makes any sense (sorry, quite new to the CSS) Here is the template preview [link](http://pixel-industry.com/html/moderna/Stretched/portfolio2.html “[link]”)

    The code parts related to this are below, I would post an entire HTML page as well as the code/script on the CodePen, just not sure if allowed due to fact its a purchased template. :/

    Thank you :)

    /* PORTFOLIO IMAGE STYLE */
    figure.img-styled img{
    opacity: 0.7;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    }

    figure.img-styled:hover img{
    opacity: 1;
    }

    figure.img-styled .img-container{
    position: relative;
    overflow: hidden;
    }

    figure.img-styled .img-hover{
    position: absolute !important;
    top: 75%;
    max-width: 90%;
    }

    figure.img-styled .img-hover{
    display: none;
    }

    figure.img-styled .img-hover li{
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    }

    figure.img-styled .img-hover li a{
    color: #fff;
    text-indent: -9999px;
    display: block;
    }

    figure.img-styled .img-hover li.title a{
    text-indent: 0;
    border-right: 1px solid #fff;
    padding-right: 10px;
    }

    figure.img-styled .img-hover li.portfolio-single{
    background: url(‘../img/chain.png’) no-repeat center;
    width: 11px;
    opacity: 1;
    }

    figure.img-styled .img-hover li.portfolio-grid{
    background: url(‘../img/grid.png’) no-repeat center;
    width: 11px;
    }

    figure.img-styled .img-hover li.portfolio-zoom{
    background: url(‘../img/zoom.png’) no-repeat center;
    width: 11px;
    }

    figure.img-styled .img-hover li.video-play{
    background: url(‘../img/play.png’) no-repeat center;
    width: 11px;
    }

    figure.img-styled .img-hover li:first-of-type{
    margin-left: 10px;
    }

    figure.no-sliding .img-hover{
    display: block;
    }

    figcaption{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fcfcfc;
    }

    figcaption p{
    text-align: center;
    text-transform: uppercase;
    }

    /*=====================================================================================
    PORTFOLIO PAGE STYLES
    ======================================================================================*/
    #portfolio-filter li a:hover{
    color: #89e0dd;
    }

    #portfolio-filter .active a{
    color: #89e0dd !important;
    }

    figcaption .category{
    color: #61d5d1;
    text-transform: none;
    }

    figure.img-styled .img-hover{
    background: #8cd8dd;
    }

    figure.img-styled .img-hover li a{
    text-shadow: 0 1px 0 #5BB9BF;
    }

    figure.img-styled .img-hover li.portfolio-single:hover{
    background: url(‘../img/blue-default/chain-hover.png’) no-repeat center;
    }

    figure.img-styled .img-hover li.portfolio-grid:hover{
    background: url(‘../img/blue-default/grid-hover.png’) no-repeat center;
    }

    figure.img-styled .img-hover li.portfolio-zoom:hover{
    background: url(‘../img/blue-default/zoom-hover.png’) no-repeat center;
    }

    /* PORTFOLIO WITH SHOWCASE – SHOWCASE ITEM STYLE */
    .showcase-nav li a:hover{
    color: #89e0dd;
    }

    .showcase-nav li a:hover{
    color: #89e0dd;
    }

    # June 25, 2013 at 4:04 pm

    the title and the link should be in the HTML… have you tried inspecting the element? https://developers.google.com/chrome-developer-tools/docs/elements

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".