Make the Image a Link

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : All members
Forum link : http://theunforgivingseas.forumotion.com

Description of problem

I have this code I am working on to make a hover effect for description, but at the same time I would also like the image to be a link that redirects into the forum. I haven't quite figured it out. Any help would be greatly appreciated. Thanks!

Code:

<style align="center">.catgdescback1 {
background:url('http://i68.servimg.com/u/f68/19/33/82/12/0m7vzm10.jpg');
width:700px;
height:100px;
padding:0px;
}
.catgdesctext1 {
background:#000000;
height:100%;
width:100%;
opacity:0.050;
transition:0.5s;
}
.catgdesctext1:hover { opacity:0.8; }</style>
<div class="catgdescback1">
             
<div class="catgdesctext1">
     <span class="catgtext1">Testing</span>      
</div>
</div>

Bump.

Are you wanting the category title to be link that loads a different page?

No, the code I have provided adds a hover effect on the image being displayed on the index so when you scroll over it, it displays the description. At the same time, I would like the image be clickable as a hyperlink directed into the forum. If that makes sense.

Could you please post a screenshot showing what this code does?

Glad to.

Screenshot:


The code creates the hovering effect over the image and displays the description of the forum. What I am also trying to do is make the image clickable as a hyperlink so it can redirect you into the forum.

Add a hover effect on the images should not affect the default option which makes the images clickable.

I've tried making the image a hyperlink with the added hovering effect, but it won't work...

Bump

Bump

Hi @Draxion,

Try this :

Code:

<style align="center">.catgdescback1 {
background:url('http://i68.servimg.com/u/f68/19/33/82/12/0m7vzm10.jpg');
width:700px;
height:100px;
padding:0px;
}
.catgdesctext1 {
background:#000000;
height:100%;
width:100%;
opacity:0.050;
transition:0.5s;
display:block;
color:#FFF;
text-decoration:none;
}
.catgdesctext1:hover { opacity:0.8; }</style>
<div class="catgdescback1">
           
  <a href="/forum" class="catgdesctext1">
    <span class="catgtext1">Testing</span>     
</a>
</div>

I simply changed

Code: .catgdesctext1

to an anchor element.

Sorry, @Ange Tuteur, it didn't work. It even took off the hover effect.

It does ? Did you copy the code exactly as it is in this post ? If so, it should give you this result.

Okay, my mistake. Must had been something I changed when changing the link. Thank you so much!

No problem, glad it's working now.

Topic archived

Have a good day. ^^