Jump to content
Sign in to follow this  
helvetik_a

Rollover image in box section

Recommended Posts

helvetik_a

Hi! I tried to found out how can i fix this problem. You can see it on my site. I followed another thread but it doesn't work... Took out also the image in the hmtl code and replaced it in the css: #fbox_968 img{display:none;} #fbox_968 { background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/box_bewegungsraum2.png) no-repeat; display: block; height: 166px; width: 175px; } #fbox_968:hover { background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/raum_hover.png) no-repeat; } Any ideas how i can fix this? Thx Corina

Share this post


Link to post
Share on other sites
batman

Hi Please try delete only the code

#fbox_968 img{display:none;}

I??m not sure


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
helvetik_a

Hi batman...nope :( doesn't work.... Anyway thx to you

Share this post


Link to post
Share on other sites
batman

I??m not sure But you can try please

#fbox_968 {
	background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/box_bewegungsraum2.png) no-repea !importantt;
	display: block;
	height: 166px;
	width: 175px;
	}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
catrina

Corrected version of batman's code above:

#fbox_968 {
	background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/box_bewegungsraum2.png) no-repeat !important;
	display: block;
	height: 166px;
	width: 175px;
	}

(Just a typo issue) :)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
helvetik_a

Hi Catrina. Sorry this is not working at all...this happens:http://wp.tanzprojekte.ch/home-3/# J9xGT.png my code: #fbox_968 img{display:none;} #fbox_968 { background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/box_bewegungsraum2.png) no-repeat !important; display: block; height: 166px; width: 175px; } #fbox_968:hover {background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/raum_hover.png) no-repeat !important;} thx Corina

Share this post


Link to post
Share on other sites
catrina

Please remove that code you are using and add this code to Custom Code > Custom CSS:

#fbox_968 {
	background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/box_bewegungsraum2.png) no-repeat !important;
	background-position: 0% 30%;
	display: block;
	height: 166px;
	width: 175px;}
	
	#fbox_968:hover {background: url(http://wp.tanzprojekte.ch/wp-content/uploads/2012/08/raum_hover.png) no-repeat !important; background-position: 0% 30%;}
	
	h6.title_homebox {margin-top: 185px !important;}
SPECIAL NOTE: For this line in the #fbox_968 and #fbox_968:hover code:
background-position: 0% 30%;

You'll need to change 30% to another percentage if the background image is positioned too high or too low (for example, use 35% to move the image lower or 25% to move the image higher, etc. etc.)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
helvetik_a

Hi Catrina. Many thanks for your response! The code didn't work out, because the boxtitle in that way is implemented in the #fbox_968 div, and the "background-position" did not respond at all. At end i solved the problem in this way: Code XHTML:

Miete mich!

Bist Du Tanzlehrer, Bewegungsfreak und/oder Hobbytaucher?

M?¶chtest Deinen eigenen Kurs anbieten? GO ???

Code CSS: #promo_raum{height:300px;} #promo_raum{position:relative;} #promo_raum img{ position:absolute; left:0; top:0px; display:block; width: 167px; opacity:1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;} #promo_raum img:hover {opacity:0;} h6.title_homebox {margin-top:-100px !important;}

Share this post


Link to post
Share on other sites
Rob

We're just happy you were able to resolve it.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×