具有100%图像比例的背景的div和其上具有可悬停按钮的div,具有100%div区域和居中文本

克鲁珀斯

我有一个复杂的案例。但对您来说可能并不复杂。

我有一个名为的模块catsocial,该模块将在一行中包含四个具有特定尺寸(300x400)的社交媒体图像,该图像应为网站宽度的100%。每个25%,因此4个DIV将是100%。

这些“图像”中的每一个都放置在名为catigInstagram,catytYouTube等的模块中

内部社交媒体模块我想有个人形象,这将填补DIV与width: 100%height: 100%该图像的。因为我在这里进行了很多搜索,所以我发现唯一的方法是将一个具有指定尺寸的图像放入DIV内,然后完全适合我的DIV。

我解决了这个问题。但是,我必须把一个链接<a href=""></a>,这将与该主DIV满足(这里catig)也有width: 100%height: 100%该DIV的,但过度的图像。

另一个问题是此链接(位于DIV:内catigbut)应仅在悬停时显示。

最后一个问题是,文本(此处为INSTAGRAM)应在垂直和水平方向上居中。

我有一个代码,图像正常显示,catigbut正常显示带也width: 100%height: 100%该DIV的,但遗憾的是我不能垂直放置INSTAGRAM在该专区文字了...

.catsocial {
  margin: 50px 0;
}

.catig {
  width: 25%;
  float: left;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  position: relative;
}

.catigimg {
  width: 100%;
}

.catigbut {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.catigbutlink {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
<div class="catsocial">
  <div class="catig">
    <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
    <div class="catigbut">
      <a href="#" class="catigbutlink" target="_blank">
        <h4 class="catigbutlinktitle">INSTAGRAM</h4>
      </a>
    </div>
  </div>
  <div class="catig">
    <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
    <div class="catigbut">
      <a href="#" class="catigbutlink" target="_blank">
        <h4 class="catigbutlinktitle">INSTAGRAM</h4>
      </a>
    </div>
  </div>
</div>

我将非常感谢您的帮助-如何使此文本垂直居中。但是,如果代码中存在任何错误,请让我知道,因为我考虑了3天多,找不到解决方案...

这是我被要求的截屏

布万

设置位置:的绝对值,.catigbutlink并尝试transform用于垂直对齐中心。对于悬停,请设置opacity:0默认值,然后将其设置opacity:1为悬停

body {
  font: 13px Verdana;
}

.catsocial {
  margin: 50px 0;
}

.catig {
  width: 25%;
  float: left;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  position: relative;
}

.catigimg {
  width: 100%;
}

.catigbut {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: center;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
}

.catigbutlink {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ff000069;
  margin: auto;
  display: flex;
}

.catig:hover .catigbut {
  visibility: visible;
  opacity: 1;
}

.catigbutlink h4 {
  margin: 0;
  color: white;
  margin: auto;
}
<div class="catsocial">
  <div class="catig">
    <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
    <div class="catigbut">
      <a href="#" class="catigbutlink" target="_blank">
        <h4 class="catigbutlinktitle">INSTAGRAM</h4>
      </a>
    </div>
  </div>
  <div class="catig">
    <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
    <div class="catigbut">
      <a href="#" class="catigbutlink" target="_blank">
        <h4 class="catigbutlinktitle">INSTAGRAM</h4>
      </a>
    </div>
  </div>
</div>

我希望这能帮到您!

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

具有半透明 100% div 和居中文本的 CSS 網格

100%Div,具有居中,固定宽度的内部Div

具有背景和居中文本的TextView

固定和居中的div,具有尺寸

在 div 中居中文本并使表格具有响应性

具有固定标头的100%高度div和边距实际上不是100%

具有 width:100% 属性的 div 右侧的空白区域

在悬停时,突出显示 div 和所有其他具有相同文本的 div

CSS在同一div中具有背景色,文本和图像

在具有图像背景的选择器之前的按钮中居中文本

具有base64图像背景的可单击div

具有背景的 Div 匹配文本高度

Bootstrap3 和 FlexBox,具有 2 列的 100% 高度 div,其中一列可滚动

如何创建具有固定高度和宽度以及居中文本的锚按钮?

如何在具有纵横比的 div 中设置居中文本?

具有动态背景的div的最大高度和最大宽度?

多个div(某些具有和不具有背景附加功能:固定)共享背景图像/具有background-size属性的奇怪结果

具有可调整大小的div,以px为单位的给定宽度和100%的最大宽度

将鼠标悬停在具有CSS变换比例的div上后添加动画

隐藏和显示具有更改图像的div

jQuery,获取具有类名称和更改文本的div?

具有垂直对齐的文本和字幕的圆形div

如何渲染具有4:3比例背景图像的div

允许具有固定宽度的div内的内部div具有100%的宽度

jQuery在具有图像映射的悬停上显示div

在具有React和Typescript的div上使用onFocus

具有100%宽度和固定高度的背景视频

在具有溢出滚动和居中的另一个div内缩放div

在具有背景颜色的父 div 中对 PNG 图像(透明)进行叠加悬停效果的问题