logo
Tags down

shadow

css affect another element on hover


By : Larry Rayes
Date : May 04 2020, 12:04 PM

I am need to get a <p> element tag to appear upon hovering over an image. As I have it, nothing happens when I hover over the image.
Any idea what I'm doing bad?

img {
  height: 400px;
  width: 400px;
  position: relative;
}

p {
  position: absolute;
  color: #b6a9a9;
  background-color: rgb(5, 5, 5);
  bottom: 50%;
  left: 1em;
  opacity: .68;
  transition: .5s ease-in;
  transform: scale(1);
  height: 25px;
  width: 25%;
}

img:hover .stuff p {
  transform: scale(2);
  transform-origin: center;
}
<img src="image.jpg">
<div class="stuff">
  <p>here's some text that will go on top of ths image ... I hope...</p>
</div>

Answer :

 you just need to add the + selector to the css definition

The + sign selector is used to select the elements that are placed immediately after the specified element but not inside.

So: img:hover + .stuff p, means: when hover over img, select it's "brother" with class .stuff and then select the p that is inside.

img {
  height: 400px;
  width: 400px;
  position: relative;
}

p {
  position: absolute;
  color: #b6a9a9;
  background-color: rgb(5, 5, 5);
  bottom: 50%;
  left: 1em;
  opacity: .68;
  transition: .5s ease-in;
  transform: scale(1);
  height: 25px;
  width: 25%;
}

img:hover + .stuff p {
  transform: scale(2);
  transform-origin: center;
}
<img src="https://via.placeholder.com/400">
<div class="stuff">
  <p>here's some text that will go on top of ths image ... I hope...</p>
</div>



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org