This is using the :hover pseudoelement in CSS3. HTML: <div id=”wrapper”> <img src=”http://placehold.it/300×200″ class=”hover” /> <p class=”text”>text</p> </div> CSS: #wrapper .text { position:relative; bottom:30px; left:0px; visibility:hidden; } #wrapper:hover .text { visibility:visible; } Demo HERE. This instead is a way of achieving the same result by using jquery: HTML: <div id=”wrapper”> <img src=”http://placehold.it/300×200″ class=”hover” /> <p … Read more
Inline objects don’t have heights or widths. Why are you setting them inline to begin with? You probably want to either float them or use display: inline-block.
Responsive Web Design, using media-queries @media screen and (min-width: 800px) { // this css will only be used when the screen size is min 800px }
svg { max-height: 100%; } WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489 I also added the workaround to the bug tracker.
use the following css: working jsFiddle img{display:block;} Images are by default displayed inline – which causes the padding below the image. (because of line-height)
Let’s break it into pieces: The yellow borders are actually set as transparent in the final product so they don’t show. They are yellow here to show how the borders look. As commented above, this answer shows the idea behind the basic triangle shape. The div by itself: <div id=”star-five”></div> Combining the :before pseudo element … Read more
This works: @include all-<map>-sprites(true); But you may want to consider the documented way of using configuration variables: http://compass-style.org/help/tutorials/spriting/ You just specify the config variable before the import. In your case: $ico-sprite-dimensions: true; @import “ico/*png”. @include all-ico-sprites; Sending true to the all include works, but as it’s undocumented, it would seem that configuration variables are the … Read more
z-index is not that simple friend. It doesn’t actually matter if you put z-index:999999999999….. But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well. I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the … Read more
You need to hide that with CSS: div { /* this will hide all divs on the page */ display:none; } If it is a particular div with certain class or id, you can hide it like: <div class=”div_class_name”>Some Content</div> CSS: div.div_class_name { /* this will hide div with class div_class_name */ display:none; } Or … Read more
To create a circle that gradually draws it’s outer path, use SVG. SVG’s stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS animation to gradually change the stroke-dashoffset to … Read more