• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

Absolute Positioning Inside Float or Relative

May 24, 2011 by Webhead

Problem:

I have a gallery with varying images so I need to use float so that the images line up correctly.  The problem is that I need to display a shade over the image when the mouse goes over the image.  It needs to look like the images below.  The problem is that if I set the shade div as position:absolute, it is absolute to the document.

Normal viewing
After mouse over

 

Solution:

The solution is to put in a “position:relative” into the floating div or the div that will contain the absolute element.  In other words the shade (with the absolute position) will have its coordinates relative to the image (the floating div).  Adding “position:relative” puts a position on the floating div and restricts the absolute positioning to within that div.

 

.person_cell {
    position: relative;
    float:left;
    width:125px;
    height:125px;
    margin:3px;
}
.shade {
    position:absolute;
    left:0;
    top:0;
    background:black;
    width:100%;
    height:100%;
    zoom:1;
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

Thanks to this post for the info.

Filed Under: Coding Tagged With: css

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools