The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Make the Image a Link

View previous topic View next topic Go down

Solved Make the Image a Link

Post by Guest on December 10th 2015, 8:54 pm

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>


Last edited by Draxion on December 15th 2015, 2:51 pm; edited 1 time in total

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 11th 2015, 9:10 pm

Bump.

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by SLGray on December 12th 2015, 2:29 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 12th 2015, 3:11 am

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.

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by SLGray on December 12th 2015, 3:38 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 13th 2015, 1:55 am

Glad to. Smile

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.

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by SLGray on December 13th 2015, 1:57 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 13th 2015, 2:00 am

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

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 14th 2015, 4:55 am

Bump

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 15th 2015, 2:19 pm

Bump

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by Ange Tuteur on December 15th 2015, 2:34 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 15th 2015, 2:40 pm

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

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by Ange Tuteur on December 15th 2015, 2:43 pm

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Make the Image a Link

Post by Guest on December 15th 2015, 2:51 pm

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

Guest
Guest


Back to top Go down

Solved Re: Make the Image a Link

Post by Ange Tuteur on December 15th 2015, 2:54 pm

No problem, glad it's working now. Smile

Topic archived

Have a good day. ^^

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum