0

I want to add zoom effect for my div element, when the link section hovered.

.box {
width: 300px;
height: 300px;
background-color: green;
}
.link:hover ~ .box{
    transform: scale(1.1);
}
<div class="box" src=""></div>

<a class="link" href="#">
   <p class="projectTitles">link</p>
</a>

as you can see, it doesn't work.

saleh
  • 315
  • 1
  • 12
  • 4
    It works perfectly as designed; but there is no previous-sibling selector. – David Thomas Feb 03 '22 at 17:30
  • hmm.. thanks I got it. so, is there any way to do what I want? – saleh Feb 03 '22 at 17:43
  • 1
    I was just writing an answer when the question was closed (perhaps, prematurely). Yes, there is something you could try: reverse the order of the elements in your HTML, wrap them into a div, then use `flex-direction: column-reverse` on the wrapper to display them properly. See: https://pastebin.pl/view/d09374c4 – Filip Milovanović Feb 03 '22 at 18:00
  • @FilipMilovanović - Wow what a trick! thank you so much, It worked! – saleh Feb 03 '22 at 18:28

0 Answers0