CODEWITHSUNDEEP
htmlcsshover
gcccpp
gcccpp

Reputation: 59

Position text over image on hover using HTML/CSS

After looking at existing answers, as well as other online tutorials, I still can't figure out how to position text over an image upon hover. Here is an example of what the image would look like when the cursor hovers over the image:

Image with Hover Text My current code is as follows: 

.project {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.project img {
	margin-top: 3em;
	width: 27em;
	height: 25em;
	position: relative;
}

.project img:hover .project p, .project img:hover .project h4 {
	opacity: 1;
}

.project p, .project h4 {
	background: rgba(0,0,0,0.5);
	color: white;
	height: 25em;
	width: 27em;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
    <div id="project_section">
		<div class="container">
			<div class="row">
				<h2>PROJECTS</h2>
		
				<div class="col-sm-6 project">
					<img src="https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="">
					<h4>Name</h4>
					<p>Put some information here...</p>
				</div>
			
				<div class="col-sm-6 project">
					<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt="">
					<h4>Namep</h4>
					<p>Put some information here...</p>
				</div>
			</div>
		</div>
	</div>

In its current state, the text does not appear at all when hovering over the image. What am I missing?

Upvotes: 1

Views: 3507

Answers (3)

sheriffderek
sheriffderek

Reputation: 9043

The key is not to position the element 'on hover' - but to positiion it how you want it, and display it - on hover / either with JavaScript - or opacity and CSS etc.

https://jsfiddle.net/sheriffderek/grkaw0o3/


markup

<div class="parent">
  <div class="child">
    <span>stuff</span>
  </div>
</div>


styles

.parent {
  position: relative; /* define context for absolutly positioned children */
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  position: absolute; /* position based on boundery created by nearest relative ancestor */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}



Now with hover... (same markup)

https://jsfiddle.net/sheriffderek/ykpacq59/

.parent {
  position: relative; /* define context for absolutly positioned children */
  width: 200px;
  height: 200px;
  background: red;
}

.parent:after {
  content: ''; /* :after has to have a content... but you don't want one */

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0);

  transition: 1s;
}

.parent:hover:after {
  background: rgba(0,0,0,.5); 
}

.parent:hover .child {
  opacity: 1;
}

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

  z-index: 5; /* only works when position is defined */ 
  /* think of a stack of paper... this element is now 5 higher than the bottom */

  color: white;

  opacity: 0;
  transition: .5s;
}

Upvotes: 3

Sean Gregory
Sean Gregory

Reputation: 621

You can use the sibling selector to target your text element (i would also wrap the p and h4 into a block level element.

I don't think css can move up nodes on hover.

Is there a CSS parent selector?

.project img:hover ~ p, .project img:hover ~ h4 {
    opacity: 1;
}

Upvotes: 0

Steven Seagull
Steven Seagull

Reputation: 210

You can use z-index.

Add position relative to parent and then create divs for image and text with position absolute and set the higher z-index to the top (text) div

Upvotes: 0

Related Questions