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.

Before Image After Text

View previous topic View next topic Go down

Solved Before Image After Text

Post by Cieniu on December 11th 2013, 8:42 pm

I want to make image in category but when mouse will be on him i want to have a text.

Something like on this forum:

http://www.homo-world.aaf.pl/

Dont know how to make it any solutions? Image is changing to the simple text.


Last edited by Cieniu on December 11th 2013, 10:28 pm; edited 1 time in total

Cieniu
Forumember

Posts : 69
Reputation : 0
Language : Poland

Back to top Go down

Solved Re: Before Image After Text

Post by SLGray on December 11th 2013, 8:43 pm

When you create a forum or edit an old one, there should be a box to enter an image's URL.


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


SLGray
Administrator
Administrator

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

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Before Image After Text

Post by Cieniu on December 11th 2013, 8:46 pm

Did u look on link? XD

I want to have a image but when i put a mouse on it (without clicking mouse) should change to a simple text. Like on that link which i gave u

Cieniu
Forumember

Posts : 69
Reputation : 0
Language : Poland

Back to top Go down

Solved Re: Before Image After Text

Post by Ange Tuteur on December 11th 2013, 9:12 pm

Hello Cieniu,

Add this to a description of one of your forums :
Administration Panel > General > Categories and forums > Edit
Add the following code to a description
Code:
<div class="catgdescback1">
 <div class="catgdesctext1">
 This is text This is text This is text This is text This is text This is text This is text
</div>
</div>

Then add this to your stylesheet :
Display > Colors > CSS stylesheet
Code:
.catgdescback1 {
background:url('http://i56.servimg.com/u/f56/18/21/60/73/captur18.png');
width:226px;
height:125px;
padding:3px;
}
.catgdesctext1 {
background:#fff;
height:100%;
width:100%;
opacity:0.050;
transition:0.5s;
}
.catgdesctext1:hover { opacity:0.8; }

Result :

Before


After


All style is done through the CSS. You can change the background image, size, opacity, ect..

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Before Image After Text

Post by Cieniu on December 11th 2013, 9:51 pm

Everything is almost perfect, last question.

How to make this text on middle of image? I know how to center but u know its showing like:


- Text text text
- free space
- free space
- free space
- free space

I want it like that:

- free space
- free space
- Text text text
- free space
- free space

Something like a vertical align on middle, just dont know the code and where to add it

Cieniu
Forumember

Posts : 69
Reputation : 0
Language : Poland

Back to top Go down

Solved Re: Before Image After Text

Post by Ange Tuteur on December 11th 2013, 10:06 pm

Replace your old description with this :
Code:
<div class="catgdescback1">
   <div class="catgdesctext1"><span class="catgtext1">This is text This is text This is text This is text This is text This is text This is text </span>
   </div>
</div>

Then add this CSS to adjust the vertical alignment of the text :
Code:
.catgdesctext1 { position:relative; }
.catgtext1 { position:absolute; top:25%; bottom:25%; }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Before Image After Text

Post by Cieniu on December 11th 2013, 10:23 pm

Thank You Very Much!


PS. This hosting is the best, so fast and professional answers. Thanks a lot.

Solved

Cieniu
Forumember

Posts : 69
Reputation : 0
Language : Poland

Back to top Go down

Solved Re: Before Image After Text

Post by Ange Tuteur on December 11th 2013, 10:35 pm

You're welcome I love you

Topic solved and archived

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