div标签内的p标签

Question

This is a two part problem. The first part is I want the image fade and the text fade to happen at the same time (on a hover over).

The second part is, I thought if I had the <p> tag inside of the <div> then it would "inherit" (I may not be using the term properly) the div properties. The text is supposed to remain fixed center of the image so anytime the image resizes or moves it takes the text with it.

Clearly neither one of those things are happening.

 .image-wrapper p { position: absolute; left: 250px; top: 130px; padding: 10px; border: 1px solid #FFF; opacity: 0; } .image-wrapper p:hover { position: absolute; left: 250px; top: 130px; padding: 10px; border: 1px solid #FFF; opacity: 100; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade:hover { opacity: 0.5; } 

 <div class="image-wrapper"> <img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image"> <p>This text here</p> </div> 

Here is a link just in case

Answer 1

for first one you can use like that

.image-wrapper:hover{
  opacity :0.7;
}

Answer 2

Both 1.) and 2.) - Try this code:

---

HTML:

 <div class="image-wrapper"> <img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image"> <p class="fade">This text here</p> </div> 

Adding the class="fade" to the <p> will make the transition smoothly for the text as well.

CSS:

 .image-wrapper p { display: none; color: #F00; position: absolute; left: 250px; top: 130px; padding: 10px; border: 1px solid #FFF; opacity: 0; } .image-wrapper p:hover, .image-wrapper:hover p { display: block; position: absolute; left: 250px; top: 130px; padding: 10px; border: 1px solid #FFF; opacity: 100; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } // When either hovering the p or the image, apply the transition. .fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade:hover { opacity: 0.5; } 

Answer 3

Check this out and let me know your feedback. Thanks!

1. The first part is I want the image fade and the text fade to happen at the same time (on a hover over).

For this to happen, add hover to image-wrapper rather than individually to p and the img like the below for instance:

.image-wrapper:hover p {
  opacity: 1;
}

.image-wrapper:hover .fade {
  opacity: 0.5;
}

2. The text is supposed to remain fixed center of the image so anytime the image resizes or moves it takes the text with it.

For this you can use the transform to center align the text over the image responsively.

.image-wrapper p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

snippet below:

 .image-wrapper{ position: relative; } .image-wrapper p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; border: 1px solid #FFF; opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .image-wrapper:hover p { opacity: 1; } .fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .image-wrapper:hover .fade { opacity: 0.5; } 

 <div class="image-wrapper"> <img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image"> <p>This text here</p> </div>