html – 使叠加框保持在图片内

概述我试图在图像上做一些悬停效果.看到 demosite here.我现在卡住了,因为无论图像大小是多少,我都希望当你将鼠标悬停在每个图像的中心时,它会出现. 我试图用悬浮物放置悬停,但这不是一个好的解决方案.有谁知道如何将渐变叠加置于每张图片的中心,无论图片大小如何？ .hovereffect { width: 100%; height: 100%; float: left; ove 我试图在图像上做一些悬停效果.看到 demosite here.我现在卡住了,因为无论图像大小是多少,我都希望当你将鼠标悬停在每个图像的中心时,它会出现.

我试图用悬浮物放置悬停,但这不是一个好的解决方案.有谁知道如何将渐变叠加置于每张图片的中心,无论图片大小如何？

.hovereffect {  wIDth: 100%;  height: 100%;  float: left;  overflow: hIDden;  position: relative;  text-align: center;  cursor: default;}.hovereffect .overlay {  wIDth: 100%;  height: 100%;  position: absolute;  overflow: hIDden;  top: 0;  left: 0;  -webkit-Transition: all 0.4s ease-in-out;  Transition: all 0.4s ease-in-out;}.hovereffect:hover .overlay {  background-color: rgba(170,170,0.4);}.hovereffect h2,.hovereffect img {  -webkit-Transition: all 0.4s ease-in-out;  Transition: all 0.4s ease-in-out;}.hovereffect img {  display: block;  position: relative;  -webkit-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);}.hovereffect:hover img {  -webkit-transform: scale(1);  -ms-transform: scale(1);  transform: scale(1);}.hovereffect h2 {  text-transform: uppercase;  color: #fff;  text-align: center;  position: relative;  Font-size: 17px;  padding: 10px;  background: rgba(0,0.6);}.hovereffect a.info {  display: inline-block;  text-decoration: none;  padding: 7px 14px;  text-transform: uppercase;  color: #fff;  border: 1px solID #fff;  margin: 50px 0 0 0;  background-color: transparent;  opacity: 0;  filter: Alpha(opacity=0);  -webkit-transform: scale(1.5);  -ms-transform: scale(1.5);  transform: scale(1.5);  -webkit-Transition: all 0.4s ease-in-out;  Transition: all 0.4s ease-in-out;  Font-weight: normal;  height: 85%;  wIDth: 85%;  position: absolute;  top: -20%;  left: 8%;  padding: 70px;}.hovereffect:hover a.info {  opacity: 1;  filter: Alpha(opacity=100);  -webkit-transform: scale(1);  -ms-transform: scale(1);  transform: scale(1);  background-color: rgba(0,0.4);}

<div >  <div >    <div >      <div >          <img  src="https://www.cAPItalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-vIEw.jpg" alt="text"></img>          <div >                          <a  href="#">link here</a>          </div>      </div>    </div>  </div>  <br/><br/>  <div >    <div >      <div >          <img  src="https://www.carzone.IE/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>          <div >                          <a  href="#">link here</a>          </div>      </div>    </div>  </div>  <br/><br/>  <div >    <div >      <div >          <img  src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>          <div >                          <a  href="#">link here</a>          </div>      </div>    </div>  </div></div>

解决方法 Firt使图像容器内联块,以便其宽度由其内容定义,然后您可以轻松调整叠加：

.hovereffect {  display:inline-block;  overflow: hIDden;  position: relative;  text-align: center;  cursor: default;}.hovereffect .overlay {  wIDth: 100%;  height: 100%;  position: absolute;  overflow: hIDden;  top: 0;  left: 0;  Transition: all 0.4s ease-in-out;}.hovereffect:hover .overlay {  background-color: rgba(170,.hovereffect img {  Transition: all 0.4s ease-in-out;}.hovereffect img {  display: block;  position: relative;  transform: scale(1.1);}.hovereffect:hover img {  transform: scale(1);}.hovereffect h2 {  text-transform: uppercase;  color: #fff;  text-align: center;  position: relative;  Font-size: 17px;  padding: 10px;  background: rgba(0,0.6);}.hovereffect a.info {  text-decoration: none;  text-transform: uppercase;  color: #fff;  border: 1px solID #fff;  background-color: transparent;  opacity: 0;  transform: scale(1.5);  Transition: all 0.4s ease-in-out;  Font-weight: normal;  height: 85%;  wIDth: 85%;  top:7.5%; /* (100% - 85%)/2 */  left:7.5%;  position: absolute;}.hovereffect:hover a.info {  opacity: 1;  transform: scale(1);  background-color: rgba(0,0.4);}

<div >  <div >    <div >      <div >          <img  src="https://www.cAPItalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-vIEw.jpg" alt="text"></img>          <div >                          <a  href="#">link here</a>          </div>      </div>    </div>  </div>  <br/><br/>  <div >    <div >      <div >          <img  src="https://www.carzone.IE/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>          <div >                          <a  href="#">link here</a>          </div>      </div>    </div>  </div>  <br/><br/>  <div >    <div >      <div >          <img  src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>          <div >                          <a  href="#">link here</a>          </div>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 使叠加框保持在图片内全部内容，希望文章能够帮你解决html – 使叠加框保持在图片内所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。