How to make each element to be fully independend with CSS? - html

Question

I have two images with text over them.
When I go to one image, the text of that image should disappear.
The code I wrote is ok and works almost fine.
<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
<div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
<div>
Css:
.sidebarimage, .sidebarimagesupermsg {
position: relative;
width: 100%; /* for IE 6 */
}
.h3sidebarimage, .h3sidebarimagesupermsg {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.h3sidebarimage span, .h3sidebarimagesupermsg span {
color: white;
font: bold 22px/45px Helvetica, Sans-Serif;
letter-spacing: 2px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer {
padding:0 5px;
}
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Please see the demo here:
http://jsfiddle.net/pikk/7dmzd7yc/
However it works fine for the 1 image. But if I go hover the 2 image, disappears also the text from the 1 image. And that's wrong.
Since I will have a lot of similar images in a sidebar, I don't want to duplicate the CSS code for each image. So I would like to know if there is a solution that permits me to keep only one copy of the css code.
I would like to keep the less CSS code as possible.
Thanks

Answer 1

The problem is that you are not closing your wrapping <div> tags. This should work:
<div class="sidebarimagesupermsg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
</div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
</div>
Here is an updated jsFiddle.

Answer 2

In addition to #JCOC611's answer above (about closing your <div> tags), you can also greatly simplify your CSS by using element tags instead of custom classes for each item.
In your question you mention:
I don't want to duplicate the CSS code for each image.
As it currently stands, your markup would need to add a selector for each image/h3 you add. If you generalize the selectors you can add a (theoretically) infinite amount without touching the CSS.
See this updated JS Fiddle for the simpler CSS.