Jump to content


Photo
- - - - -

boxes + responsive css

css3 boxes padding

  • Please log in to reply
3 replies to this topic

#1 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 30 April 2013 - 09:10 AM

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:

Please Login or Register to see this Hidden Content

 

Code Html:

<div class="hover_kurse"><a href="#">
<img class="bottom" alt="afro fit link" src="

Please Login or Register to see this Hidden Content

" />
<img class="top" alt="afro discover link" src="

Please Login or Register to see this Hidden Content

" />
</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;}

 

 

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 April 2013 - 09:23 AM

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.

 

Please Login or Register to see this Hidden Content



#3 helvetik_a

helvetik_a

    Advanced Member

  • Members
  • 99 posts
  • Locationrome - italy
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 06 May 2013 - 02:29 PM

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



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 May 2013 - 07:07 PM

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







Also tagged with one or more of these keywords: css3, boxes, padding