Is it possible to manipulate an ID in the CSS via another ID?

Asked

Viewed 47 times

0

I would like that when passing the mouse over the image #imagem:hover the body dark, in order to focus only the image #body: opacity: 0.5

.card-img-top:hover {
	border: 1px solid #007BFF;
	/* zoom ao passar o mouse */
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);	
}
<img class="card-img-top" src="https://via.placeholder.com/140x100" >

css

  • It is not possible to do only with CSS. It is necessary Javascript.

  • Got it, thanks for the reply Valdeir!

  • 1

    You can do only with CSS, edit your question and put what you already have of code, then we can vote to reopen the question

  • I put html and css, but it’s not much, I put only the basics to understand how it really works, thank you.

  • Weslley I did an edit and put an image so you’d look better if there were any answers ...

2 answers

0

There is a workartheund what you can do, it works using box-shadow really big, but really big, like 3000px :)

So when you do the :hover in the element you put the box-shadow and increases the z-index of the element, just to ensure that it will stand by others and the shadow will cover everything.

The 3000px you have to use as the fourth value of box-shadow, type 0 0 0 3000

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
}

.card-img-top {
    position: relative;
    margin: auto;
    margin-top: 50px;
    text-align: center;
}

.card-img-top:hover {
    z-index: 1000;
    box-shadow: 0 0 0 3000px rgba(255, 0, 0, 0.5);
    border: 1px solid #007BFF;
    /* zoom ao passar o mouse */
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
<img class="card-img-top" src="https://via.placeholder.com/140x100">
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quod necessitatibus ex maxime saepe officiis excepturi voluptates. Sapiente unde debitis, odit magnam suscipit iure voluptates eos animi nemo, beatae quae minima voluptatem sunt saepe consectetur nostrum! Ullam, consequuntur repellendus aspernatur quae cupiditate id voluptatem, nesciunt rerum voluptatibus tempora animi corporis quaerat ducimus, quibusdam reiciendis ratione. Provident temporibus earum corrupti, suscipit sit quis consequuntur aspernatur non delectus officia consectetur pariatur ullam error reprehenderit doloribus, sapiente magnam hic vel qui. Labore sit at architecto recusandae perferendis. Ea, </p>

0

I made an initial configuration for an element <p> where it will cover the entire area of the page and when hovering the mouse on the image the element <p> will change the color and thus giving the effect to darken more than the image, example:

.p {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
  background: #FFF;
}

.card-img-top:hover {
  border: 1px solid #007BFF;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.card-img-top:hover ~ .p {
  opacity: 0.5;
  background: #111;
  filter: alpha(opacity=50);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
<div>
  <h1>Titulo da foto</h1>
  <img class="card-img-top" src="https://via.placeholder.com/140x100" border="0"> 
   <div class="p"></div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu leo a enim scelerisque rhoncus eget sit amet ipsum. Ut vel lacus quam. Ut pretium quam sit amet magna commodo, sit amet pharetra ex varius. Integer condimentum nisl ut aliquet suscipit. Praesent lacinia quam eget gravida dapibus. Nunc ullamcorper et nulla non ornare. Sed cursus diam neque, at fringilla risus volutpat non. Sed eget mauris blandit, consequat magna non, porttitor turpis. Quisque scelerisque urna odio, sit amet fermentum velit pretium at. Aenean maximus urna lacinia mauris bibendum, a fermentum ante iaculis. Donec augue nulla, pellentesque vitae efficitur efficitur, rutrum a justo. Nulla efficitur libero egestas, malesuada odio at, suscipit risus. Fusce elementum accumsan diam, eget vulputate nisi ornare et. Curabitur convallis ligula in hendrerit varius.

Aenean ut nisl pulvinar, pharetra neque at, varius libero. Vestibulum felis dui, posuere vitae dolor quis, venenatis rutrum tortor. Duis vestibulum diam sit amet ultricies lobortis. Praesent vulputate interdum scelerisque. Sed ornare mi eu vulputate convallis. Vivamus bibendum ullamcorper felis a finibus. Donec elementum libero nec orci eleifend, vel ultrices odio sagittis. Vivamus scelerisque tincidunt pharetra. Morbi porttitor ultrices nisi vel ultricies. Praesent venenatis rutrum odio, ut luctus urna congue ac. Curabitur maximus felis nec nibh interdum egestas. Praesent in velit pretium, imperdiet nunc nec, efficitur est. Integer placerat nibh felis, vel scelerisque mauris lobortis quis. In eget laoreet sapien. Praesent imperdiet rhoncus mauris, et rhoncus ligula porta gravida. Vivamus fermentum tempor justo, at dictum lectus fermentum ut.

Quisque risus arcu, feugiat eget sapien id, tincidunt accumsan neque. Quisque faucibus egestas felis vitae sollicitudin. Vivamus dictum rutrum vestibulum. Vestibulum ac sodales metus. Integer et interdum augue, ut molestie odio. Nullam nec sapien in eros egestas consectetur non at mauris. Morbi congue bibendum efficitur. Proin rhoncus velit id nulla tincidunt, vitae gravida lacus ultricies. Nullam lectus ipsum, consectetur vel odio sit amet, pulvinar pulvinar mauris.

Nullam urna augue, lobortis sit amet purus nec, tincidunt scelerisque nisl. Quisque ornare, eros ut cursus maximus, sapien felis rhoncus leo, in pulvinar augue velit ut nunc. Nulla sit amet augue porta, malesuada ipsum vitae, tincidunt lorem. In hac habitasse platea dictumst. Aenean non fringilla arcu. Praesent nec commodo nunc. Donec bibendum metus libero, ac tincidunt lorem vulputate aliquam. Ut non rhoncus erat. Vivamus at risus arcu. Sed erat nisi, viverra quis nisi nec, auctor vulputate ipsum.

Sed fringilla blandit congue. Curabitur aliquam, odio nec fermentum faucibus, nisl orci egestas nibh, sit amet mattis arcu magna tempus dolor. Donec pulvinar placerat est, nec condimentum felis imperdiet quis. Nunc vel fermentum ipsum, sit amet tempus dui. Nulla vel magna tellus. Nunc placerat mauris justo. Cras et magna condimentum, mollis diam et, suscipit elit. Vestibulum mattis, risus id aliquet mattis, metus diam vehicula leo, in pulvinar tellus eros at neque. Nulla id tincidunt mi. Nunc vehicula nisi leo, in consequat lacus finibus vitae. Aliquam ut justo placerat, venenatis dui vel, suscipit lectus. Duis id urna porttitor, ullamcorper odio at, sodales nulla. Nam urna elit, molestie vel orci ut, congue laoreet odio.</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.