Archived

This topic is now archived and is closed to further replies.

  • 0

boxes + responsive css


Question

Posted · Report post

Hi, i have an issue with the box section.

I have a css3 fade animation as hover effect and both images (top+bottom) are positioned in the box content area.

The browser compatibility is ok in firefox, google chrome, safari, but the responsive layout doesn't work on the mobile devices....

how can i resolve this?

thx for your response.

 

Site:

http://wp.tanzprojekte.ch/wordpress/kursangebot/

 

Code Html:

<div class="hover_kurse"><a href="#">
<img class="bottom" alt="afro fit link" src="http://wp.tanzprojekte.ch/wordpress/wp-content/uploads/2013/04/at_discover_02_hover.jpg" />
<img class="top" alt="afro discover link" src="http://wp.tanzprojekte.ch/wordpress/wp-content/uploads/2013/04/at_discover_02.jpg" />
</a></div>

 

Code Css:

.hover_kurse{

position:relative;width: 250px;
height: 250px;}

.hover_kurse img{
position:absolute;
left:0;
top:0px;
display:block;
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;}

.hover_kurse img:hover {opacity:0;}

 

 

post-14082-0-33036300-1367311979_thumb.p

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi. So there's no possiblities to add a hover effect inside the box? I tried also with the sprite technique without the absolute position. But anyway you cannot give me support because of the custom code...

 

thx anyways

Share this post


Link to post
Share on other sites

Posted · Report post

You'd need to use an alternative solution to create boxes with a hover effect.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

The Boxes section are responsive out of the box, therefore the issue is most certainly related to your hover custom CSS. Unfortunately, we are unable to provide support to user created custom code. The issue most likely comes from your use of position:absolute;

 

What you will need to do, is review your code and make some alterations. If you're still having difficulty, you could try asking this question on a CSS support forum or contact one of our pros for further assistance.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites