Dropsen Dropsen - 4 months ago 13
CSS Question

img:hover doesn't works with background-color

I want to add hover effect to image, but it doesn't works for me. When I added css style like opacity 0.4, it works but not with background-color. Could someone help me, please? I want to do for example red background with small opacity and with small icon like "+" centered vertically and horizontally because it will be small lightbox.

I have second question but it isn't important as first question. How to show img on click vertically and horizontally. I appreciate every kind of help!

Here is code:

HTML & CSS:



html,body {
font-family: 'Raleway', sans-serif;
padding: 0 2em;
font-size: 18px;
background: #222;
color: #aaa;
text-align:center;}

h1 {
font-size: 3em;
font-weight: 200;
margin: 0.5em 0 0.2em 0;}

p {
margin: 1.5em 0;
color: #888;}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
display: inline-block;}

.normal-img img:hover{
opacity:0.6;
background: red;}

.lightbox:target {
outline: none;
display: block;}

<h1>CSS Lightbox</h1>
<p>Click the thumbnail below to activate the lightbox</p>
<a href="#img1" class="normal-img">
<img src="http://placehold.it/350x150">
</a>
<a href="#_" class="lightbox" id="img1">
<img src="http://placehold.it/350x150">
</a>




Answer

Try putting the image into the div and applying the background to the div:

#container {
  background: red;
  height: 150px;
  width: 350px;
  position: absolute;
  margin: auto;
  top: 0;left: 0;right: 0;bottom: 0;
}
#container img:hover {
  opacity: 0.6
}
<div id="container">
  <img src="http://placehold.it/350x150">
</div>