使用放大效果调整图像和文本块

时间：2017-04-25 11:42:09

标签： html css css3

我试图将文字放在图像的底部，而图像zoom-in效果可以通过将鼠标放在文字+图像上来触发。此外，图像高度应保持相同或至少在其占位符内，而不是在文本上。

注意：图片有叠加层，但目前无处不在：（

我该怎么办？我被卡住了。 的 http://jsfiddle.net/6bgxn2s4/

HTML：

＆＃13;
＆＃13; 
.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
}
.zoom-text {
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.zoom-block img{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
}
.zoom-link {
    display: block;
}
.zoom-block:hover img{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}
＆＃13; 
<div class="zoom-group">
 <a class="zoom-link" href="#" >
   <div class="zoom-block">
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text"></div>
  </div>
  <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
  </div>
 </a>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

问题是转换：scale总是与其他容器重叠。因为它不会改变实际高度和元素。

解决方法可能是您在悬停时更改宽度：

.zoom-group{
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
  width:250px;
}

.zoom-block {
  position:relative;
  height:250px;
  width:250px;
  overflow:hidden;
  left:0;
  right:0;
  margin:auto;
}

.zoom-text {
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.zoom-block img{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
  display:block;
   width:250px;
}
.zoom-link {
    display: block;
}
.zoom-group:hover .zoom-block img{
 -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}
<div class="zoom-group">
 <a class="zoom-link" href="#" >
 
 
   <div class="zoom-block">
   
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text"></div>
    
    
  </div>
  <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
  </div>
 </a>
</div>

答案 1 :(得分：2)

这是两种方式，第一种方法使用flexbox技巧，只放大图像和底部文字。

您只需更改zoom-block和zoom-bottom元素的标记顺序，然后使用flexbox属性order重新排序它们。

完成后，您可以使用兄弟选择器+在悬停文本时定位图像，因为它在标记之前是之前的，但在之后是可视的 >

我还将图像更改为display: block（缩放时效果会更好），为zoom-block添加了新规则，因此它会调整图像大小，缩小图像比例时的溢出效果，并将叠加文字放在图像顶部 

.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
}
.zoom-text {  
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.zoom-block {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.zoom-block img{
  display: block;
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
}
.zoom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.zoom-bottom {
    order: 1;
}

.zoom-bottom:hover + .zoom-block img,
.zoom-block:hover img{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}
<div class="zoom-group">
 <a class="zoom-link" href="#" >
   <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
   </div>
   <div class="zoom-block">
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text">Hello zoom text</div>
  </div>
 </a>
</div>

第二个，在:hover元素上设置zoom-link而不是zoom-block 

.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
}
.zoom-text {  
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.zoom-block {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.zoom-block img{
  display: block;
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
}
.zoom-link {
    display: block;
}
.zoom-link:hover img{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}
<div class="zoom-group">
 <a class="zoom-link" href="#" >
   <div class="zoom-block">
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text">Hello zoom text</div>
  </div>
  <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
  </div>
 </a>
</div>

答案 2 :(得分：0)

主要关注点是变换：与其他容器重叠的比例，因为它不会改变元素的实际高度和宽度。

.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
}
.zoom-text {
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.zoom-block img{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
  display:block;
   width:250px;
   height:auto;
   left:0;
   right:0;
   margin:auto;
}
.zoom-link {
    display: block;
}
.zoom-block:hover img{
  width:300px;
  height:auto;
}

<div class="zoom-group">
 <a class="zoom-link" href="#" >
   <div class="zoom-block">
    <img src="http://placehold.it/250x250" />
    <div class="zoom-text"></div>
  </div>
  <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
  </div>
 </a>
</div>
相关问题
最新问题