Image Hover link question

[SilverOxy]

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;
}

[seanallen007]

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

[Author]

Posts