在鼠标悬停时，当img没有使用object-fit: contains时，img下面的动画span标签可以正常工作:
body {
height: 100%;
width: 100%;
margin: 0
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
}
.product {
position: relative;
width: 150px;
}
img.content {
background: white;
height: auto;
margin: 8%;
position: relative;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
@keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}<body>
<div class="container">
<p>Hover image please</p>
<div class="product">
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
</div>
</div>
</body>但是当img使用object-fit: contains时，动画跨度会占据整个区域
body {
height: 100%;
margin: 0;
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 700px;
}
.product {
height: 100%;
position: absolute;
}
.content {
background: white;
margin: 8%;
position: relative;
width: 84%;
height: 100%;
vertical-align: middle;
z-index: 5000;
object-fit: contain;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
@keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}<body>
<div class="container">
<div class="product">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>当使用object-fit: contain时，如何使这些悬停效果仅应用于图像周围的区域(而不是整个区域)?使用object-fit，图像必须保持垂直居中。
这是你想要的吗?该图像位于动画div之间。
在你给出的第二个例子中你的图像变大的原因是因为你改变了你的CSS。你已经改变了.container,.product等的高度/宽度值，所以子元素显示得更大，因为它们继承了这些值。
我改变了.container中的max-width和min-height，以减小整体大小。.content的宽度应该小于effectdiv的宽度
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
max-width: 300px;
/* This is new */
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 300px;
/* This is new */
}
.product {
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
display: flex;
align-self: center;
background: white;
margin: 0 auto;
position: relative;
width: 65%;
/* This is new */
object-fit: contain;
/* This is new */
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: flex;
}
.effects {
position: absolute;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: flex;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
visibility: visible;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
object-fit: contain;
display: flex;
margin: 0 auto;
align-self: center;
position: relative;
}
@keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}<body>
<div class="container">
<div class="product">
<span class="effects">
<img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"></span>
<span class="effect-2"></span>
</span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>