See: https://jsfiddle.net/8osg70fp/
I have an image on the right-hand side of the page that I want to scale like in the fiddle, when a div on the opposite side is hovered on.
I know its something along this format, but I cant get it to work.
var treecontainer=document.getElementById('treecontainer'); //DIV=TREECONTAINER
$(treecontainer).mouseover(function(){
/*CHANGE IMAGE'S CSS HERE*/
});
$(treecontainer).mouseleave(function(){
/*CHANGE IMAGE'S CSS BACK HERE*/
});
Please have a look. Let me know if this is not what you need.
.container { display: flex; justify-content: space-between; margin: 20px; } .myhover { width: 100px; height: 100px; background-color: blue; } .myhover:hover + .scaleme { transform: scale(1.2); }
<div class="container"> <div class="myhover"></div> <img class="scaleme" src="http://placehold.it/100"> </div>
i think this is what you're looking for
js
$('div').mouseenter(function(){
$('.secondone').css({transform:'scale(1.5)'});
});
$('div').mouseleave(function(){
$('.secondone').css({transform:'scale(1)'});
});
css
div {
height:200px;
width:200px;
background-color:black;
margin:5% 30%;
transition:.5s ease;
}
<div></div>
<div class="secondone"></div>
You don´t need any javascript to do this. If you use a CSS scale transformation on hover state, you´ll have exactly the same effect without unnecessary JavaScript.
Only with few lines of CSS
div {
height:200px;
width:200px;
background-repeat: no-repeat;
background-size: contain;
background-image: url(https://source.unsplash.com/random);
transition:.5s ease;
}
div.first:hover + div.second {
transform: scale(1.2);
}
Check my pen - https://codepen.io/Legues/pen/LLRxQg
Try this:
CSS
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transition: all 3s;
}
.div1:hover+ .div2 {
border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* Standard syntax */
transition: all 3s;
}
URL: Check demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.