I am in the process of developing a webpage that showcases school events. I am attempting to create a div called "eventContainer" within which there is another div named "eventImgContainer" containing an image. When this image is hovered over, I want it to perform an action such as blurring or changing opacity.
However, I'm encountering an issue where the hover effect does not work when the div with the image is inside another element.
I have tried different syntax elements like ">" or "+" or ', ' related to hover effects but nothing seems to be working. Any insights into why this might be happening?
I am determined to achieve this using only CSS.
Here is the HTML:
<div class="eventContainer">
<div class="eventDescription"><!-- code with event description here --></div>
<div class="eventImgContainer">
<img src="1_Zdjecia/event_1/1.jpg" id="Photo1" title="football">
<p class="hidedText">Go to Gallery</p>
</div>
</div>
CSS:
.eventContainer {
z-index: -1;
position: relative;
margin: auto;
left: 0;
right: 0;
width: 700px;
height: 270px;
background-color: #E6E6E6;
border: 4px solid white;
}
.eventImgContainer {
position: relative;
width: 375px;
height: 217px;
top: 20px;
left: 305px;
margin: 0;
}
.eventImgContainer img {
position: absolute;
width: 100%;
display: block;
}
.eventImgContainer:hover #Photo1 {
opacity: 0.5;
width: 400;
}