图像放大与CSS悬停 [英] Image zoom on hover with CSS
本文介绍了图像放大与CSS悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试执行此指南：。您可以将所有浏览器前缀添加到它。
更新：
< div id =img1>
< img src =https://images.unsplash.com/photo-1458668383970-8ddd3927deed?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1e9d6264da3ae9cacdddcad3b63f3c04 alt =class =img-zoom>
< / div>
.img1 {
margin：100px;
width：300px;
height：auto;
}
＃img1：hover .img-zoom {
cursor：pointer;
transform：scale（1.3）;
}
.img-zoom {
width：100％;
transform：scale（1）;
过渡：所有.2s缓解;
}
I'm trying to do this guide: Link to Guide and I cant get that end :S, my image doesn't zoom out when I hover the image :S
The result should be something like this: Result
Here's my code:
HTML:
<body>
<div id="logo">
<img src="img/logotipo.png" alt="logotipo" id="logotipo" class="img-responsive" />
</div>
<div class="container">
<nav class="navbar">
<p class="navbar-brand">JVasconcelos</i>
<ul class="nav">
<li><a href="#" title="Return to the Homepage">Home</a></li>
<li><a href="#" title="Visit the Features Page">Features</a> </li>
<li><a href="#" title="See the prices">Pricing</a></li>
<li><a href="#" title="Learn more about our organization">About</a></li>
<li><a href="#" title="Contact us!">Contact</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="col-md-12">
<div class="col-md-4" id="img1">
<img src="img/img01.png" alt="img01" class="img-responsive img-zoom" id="img01">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.img-zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
</script>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
CSS:
/* Navbar styling */
.navbar { background: #ddd; margin-top: 200px; border-radius: 0; }
.navbar ul { list-style: none; padding: 0; margin: 0; }
.navbar li a { float: right; line-height: 80px; padding: 0 30px; text-decoration: none; color: #555; }
.navbar li a:hover { background-color: #aaa; color: #333; }
.navbar-brand { margin-left: 40px; margin-top: 15px; }
/* Logotipo */
#logo { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -350px; }
/* COL-MD-12 */
.col-md-12 { height: 450px; background-color: #fff; text-align: center; margin-top: -20px; padding-top: 45px; }
/* COL-MD-4 */
#img1 { height: 150px; width: 150px; background-color: #333; text-align: center; color: #fff; margin-left: 20px; }
#img01 { height: 150px; width: 150px; border-radius: 1px; border-spacing: 2px; border-color: #0000000; }
/* HOVER */
.img-zoom { width: 350px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
.transition { -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); }
When I set up this code, I get the image possitioned where I want it, but when I hover the image, it doesn't work, and nothing happens :S What I'm doing wrong guys? Sorry for this long post :S
解决方案
You have the demo here. You can add all the browser prefixes to it.
Updated:
<div id="img1">
<img src="https://images.unsplash.com/photo-1458668383970-8ddd3927deed?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1e9d6264da3ae9cacdddcad3b63f3c04" alt="" class="img-zoom">
</div>
.img1 {
margin: 100px;
width: 300px;
height: auto;
}
#img1:hover .img-zoom {
cursor: pointer;
transform: scale(1.3);
}
.img-zoom {
width: 100%;
transform: scale(1);
transition: all .2s ease;
}
这篇关于图像放大与CSS悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
