CSS / JS调整大小以适合图像大小

德雷克

我对过渡做了一点实验,并想在:hover上显示图像的标题。这就是我现在得到的:(
我尝试使用图像的大小来调整图形本身的大小)

//Resize figure to image size
$(document).ready(function() {
  $("figure>img").load(function() {
    $(this).parent().width($(this).width());
  });
});
figure {
  display: table;
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  /* unvisible to fade in later */
  bottom: 0;
  left: 0;
  display: none;
  /* unvisible to fade in later */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
  /* visible */
  left: 0;
  display: inline-block;
  /* visible */
}
.img-middle {
  height: 60%;
  width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <img class="img-middle" src="img/test.png" alt="" width="700" height="500"></img>
  <figcaption>This is a cool caption</figcaption>
</figure>

该图从未调整过大小。
现在的问题是,图形以某种方式具有100%的宽度,因此该:hover效果还触发了图像旁边的某个位置。我不想手动设置图的大小。当我尝试figure>img:hover figcaption { /* do stuff */ }(仅在图像悬停触发字幕淡入)时,它以某种方式不再起作用。
因此,因为那对我不起作用,所以我尝试根据父母的孩子的尺寸来调整父母的尺寸...

这个数字比我的形象大

走开

这是你要去的吗?

figcaption {
  position: absolute;
  display: block;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  height: 100%;
  overflow: hidden;
  width: 0;
  /* unvisible to fade in later */
  top: 0;
  left: 0;
  /* unvisible to fade in later */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
}
figure {
  display: table;
  position: relative;
  overflow: hidden;
  border: 1px solid;
  /**
  * only an example
  */
  width: 500px;
  height: 100px;
}
figure img {
  display: block;
  width: 100%%;
  height: 100%;
}
figure > .image-container {
  width: auto;
  display: block;
  width: 80%;
  margin: 0 auto;
}
figure > .image-container:hover {
  width: 100%;
}
figure > .image-container:hover figcaption {
  padding: 10px 20px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <div class="image-container">
    <img class="img-middle" src="http://lorempixel.com/400/200/" alt="" width="100%" />
    <figcaption>This is a cool caption</figcaption>
  </div>
</figure>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS使图像调整大小并适合任何屏幕

来自分类Dev

如何使用CSS调整图像大小以适合其容器

来自分类Dev

如何调整图像大小以使其适合CSS容器?

来自分类Dev

需要调整横幅大小以适合窗口CSS

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

自动调整背景图像大小以适合较小的窗口和移动设备-HTML / CSS

来自分类Dev

HTML/CSS:如何在调整窗口大小时使图像周围的文本适合?

来自分类Dev

如何防止在CSS中调整图像大小?

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

CSS图像按高度调整大小

来自分类Dev

CSS图像调整大小问题

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

自动调整CSS中图像的大小

来自分类Dev

CSS悬停边框,无需调整图像大小

来自分类Dev

使用PHP或CSS调整图像大小?

来自分类Dev

使用CSS动态调整图像大小

来自分类Dev

CSS 图像水平调整大小

来自分类Dev

动态调整div的CSS缩放以适合容器的大小

来自分类Dev

CSS避免容器调整大小以适合粗体文本

来自分类Dev

CSS Flex:根据图像大小调整Flex框的大小

来自分类Dev

裁剪和保留宽高比时适合的CSS / JavaScript图像大小

来自分类Dev

CSS图像边框翻转效果而无需调整图像大小?

来自分类Dev

自动调整大小的 css

来自分类Dev

调整图像大小,使其完全适合幻灯片,但问题仍然是使用for循环将css代码替换为我的图像

来自分类Dev

调整图像大小以适合JLabel

来自分类Dev

调整 UICollectionViewCell 的大小以适合图像

Related 相关文章

热门标签

归档