Jump to content
helvetik_a

boxes + responsive css

Recommended Posts

helvetik_a    0
helvetik_a

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
helvetik_a    0
helvetik_a

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
catrina    103
catrina

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


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

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


  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

×