好的,我有这个:
我想在推荐 1、推荐 2 中添加图片...我已经使用 <img>
实现了这一点标签。但是我有两个问题:
1) 它不会适合正方形,它只是设置图像的高度和宽度。 (参见这张图片:https://imgur.com/a/Hkm6ZRy)
2) 我需要将文本放在图像/容器的底部(就像现在一样。)我尝试使用 position: absolute;
修复此问题,但我得到了这个 - https://imgur.com/a/9OdDF1I .由于某种原因,图像在右上角。
我没有使用 css 背景图片,因为当用户将鼠标悬停在图片上时我需要缩放效果。
这是 HTML(4 个推荐元素):
<div class="col-xl-9 col-md-9 sec-three-right bg-primary">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-xl-6 d-flex flex-column zoom">
<img class="img-fluid" src="img/pickone.jpeg" alt="pickone" style="width:100%;">
<div class="mt-auto right-pick">Recommend 1</div>
</div>
<div class="col-xl-6 bg-success d-flex flex-column">
<div class="mt-auto right-pick"> Recommend 2 </div>
</div>
<div class="col-xl-6 bg-danger d-flex flex-column">
<div class="mt-auto right-pick"> Recommend 3 </div>
</div>
<div class="col-xl-6 bg-info d-flex flex-column">
<div class="mt-auto right-pick"> Recommend 4 </div>
</div>
</div>
</div>
这是 CSS:
.sec-three-left {
padding-left: 0;
padding-right: 0;
}
.sec-three-right {
padding-left: 0;
padding-right: 0;
}
.right-pick {
margin-bottom: 25px;
font-size: 25px;
letter-spacing: 0.8px;
color: white;
text-shadow: 2.5px 2.5px black;
}
.zoom {
position: relative;
overflow: hidden;
}
.zoom:hover img {
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
.zoom img {
transition: all 0.4s;
-moz-transform: all 0.4s;
-webkit-transform: all 0.4s;
}
这是 JSFiddle:https://jsfiddle.net/prozik/jvneLe9e/
我正在使用 Bootstrap v4.1.0 和 jQuery 3.3.1。
最佳答案
修复了我的 position: absolute;
问题:
这是 HTML:
<div class="col-xl-9 col-md-9 sec-three-right">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-xl-6 d-flex flex-column zoom">
<img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
<div class="mt-auto right-pick">Recommend 1</div>
</div>
<div class="col-xl-6 d-flex flex-column zoom">
<img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
<div class="mt-auto right-pick"> Recommend 2 </div>
</div>
<div class="col-xl-6 d-flex flex-column zoom">
<img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
<div class="mt-auto right-pick"> Recommend 3 </div>
</div>
<div class="col-xl-6 d-flex flex-column zoom">
<img class="img-fluid" src="img/pickone.jpeg" alt="pickone">
<div class="mt-auto right-pick"> Recommend 4 </div>
</div>
</div>
</div>
</div>
还有 CSS:
.right-pick {
position: absolute;
font-size: 25px;
letter-spacing: 0.8px;
color: white;
text-shadow: 2.5px 2.5px black;
bottom: 15px;
text-align: center;
width: 100%;
}
这是结果:
关于html - 在文本重叠时放大图像(在图像中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50278327/