Home/ Questions/Q 8627071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:11:12+00:00

I’m trying to create a hover panel effect which will pop out to the

  • 0

I’m trying to create a hover panel effect which will pop out to the left but I’m having a few troubles with it. I’ve attached an image of the effect I’m trying to make.

enter image description here

There is an example of what I’m trying to make over on CodePen. Check it out:
http://codepen.io/anon/pen/CgKqs

I must be having a total mental block today because I simply cannot figure this out. My aim is to do this without javascript, as a CSS-only thing. I’m having real trouble getting the ‘pop out’ to position correctly.

Specific issues are:

  1. After hovering (returning to it’s supposed default state) items disappear in IE.
  2. The hovered ‘pop out’ forces a horizontal scrollbar to appear.

Can some kind and ninja-like HTML/CSS genius lend a hand?

Thanks,

Adam.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is what you want:

    /* Galerie */
.galerie { float:right; height:440px; width:160px; padding:10px; 
           background-color:grey; }

/* Content boxes here */
.cont { float:right; height:130px; width:150px; padding:4px; margin-top:4px; 
background-color:grey;  border:1px solid #000; border-radius:16px 16px 16px 16px; }

/* Dont display the text until hover */
.txt { float:left; width:53%; display:none; }

/* There is 4px padding between img and content div so for a fitting look 
   radius of image should be 16 - 4 = 12px */    
.pic { float:right; display:block; }
.pic img { height:130px; width:150px; border-radius:12px 12px 12px 12px; }

/* On Hover */
.cont:hover { width:320px; background-color:white; }
.cont:hover .txt { display:block; }
    <div class="galerie">
    <div class="cont">
        <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/140095/140095,1310613638,1/stock-photo-team-work-ants-constructing-bridge-80955316.jpg"></div>
        <div class="txt">
            This is the text of content
            and some more text to see
            and a little more text..
        </div>
    </div>
    <div class="cont">
        <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/51333/51333,1199715661,1/stock-photo-young-puppy-listening-to-music-on-headphones-8323504.jpg"></div>
        <div class="txt">
            This is the text of content
            and some more text to see
            and a little more text..
        </div>
    </div>
    <div class="cont">
        <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/57421/57421,1154123042,1/stock-photo-four-penguins-in-antarctica-1607229.jpg"></div>
        <div class="txt">
            This is the text of content
            and some more text to see
            and a little more text..
        </div>
    </div>
</div>

    edit: new fiddle link added..

    https://jsfiddle.net/BerkerYuceer/sd8mLajr/

    you can turn those content divs into links if you want.

    • 0