Question

这里我拍摄了一张图片，我希望用图片中的一些颜色和文字填充图像，并使其仅在悬停时显示？

这是图像b4悬停！

这是悬停后的图像

HTML：

 <div class="product_img">
  <img src=""/>

    <div class="product_des">
     <div class="product_des_content">
      <p><span>Trade Name :</span> White Wholes</p>
      <p><span>Colour/Characteristics :</span> White/pale ivory/light ash. Characteristic shape</p>     
    </div>
   </div>   
</div>

的CSS：

  <style>
   .product_img{width:32%;float:left;margin:6px;height:248px;border:1px solid #000; position: relative;-webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
transform: rotate(45deg);}
 .product_img img{width:100%;}
 .product_img ul {width:100%;background:#E64A43;float:left;}
 .product_img ul li{color:#fff;width:49%;float:left;text-align:center;border-right:1px solid #000;list-style:none;font-family: 'OpenSansSemibold';}
.product_img ul li:last-child{border-right:none;}
 .product_des{color: #fff; background:#000; visibility: hidden;transition:1s;opacity: 0;width:100%;float:left;height:248px;float:left; position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.product_des_content{float:left;margin:75px 0 0 0;}
 .product_des p{text-align:center;width:100%;font-family: 'open_sanslight';font-size:15px;}
.product_des p span{font-weight:bold;}
.product_img:hover .product_des {visibility: visible;opacity:0.75;}
</style>

Answer 1

无论如何，如果没有您的代码，请尝试以下内容：

div {
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    margin: auto;
    margin-top: 60px;
    overflow: hidden;
    position: relative;
}

div::before {
    content: "";
    display: block;
    background: url('http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png');
    position: absolute;
    width: 300px;
    height: 300px;
    transform: rotate(-45deg);
    background-size: 100% 100%;
    top: -54px;
    left: -54px;
}

div::after {
    content: "";
    display: block;
    width: 482px;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transform: rotate(-45deg);
    position: absolute;
    bottom: -200px;
    left: 0;
    transition: .3s all ease;
}

div:hover::after {
bottom: 0;  
}

<div></div>

Answer 2

使用以下代码检查可能有助于开发相同的内容。

div#UserInfo {
  width: 200px;
  height: 200px;
  background:lightgray;
  transform: rotate(45deg);
  margin: auto;
  margin-top: 60px;
  overflow: hidden;
  position: relative;
}

div#UserInfo::after {
  content: "";
  display: block;
  width: 482px;
  height: 100%;
  background: rgba(255,0,0, .5);
  transform: rotate(-45deg);
  position: absolute;
  bottom: -200px;
  left: 0;
  transition: .3s all ease;
}
div#UserInfo:hover::after {
  bottom: 0;  
}

.userImg{
  transform: rotate(315deg);
}

.userDtls{
  transform: rotate(315deg);
  position: absolute;
  bottom: 50px;
  left: 85px;
  display: none;
  transition: 50s all ease;
  text-align : center;
}

.userName{
  text-transform : uppercase;
  
}

#UserInfo:hover .userDtls{
  display: block;
  color : white;
  z-index : 999;
}

<div Id="UserInfo">
  <img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/user.png" class="userImg"/>
  <div class="userDtls">
  <span class="userName">Charlie </span><br>
  <span>UI Designer</span>
  
  </div>
</div>

Answer 3

您是否需要完整的css解决方案，或者您的常规/简单解决方案是否正常？

我会为此使用两个不同的图像并将它们放在一个精灵图像中。第一个图像用于显示正常状态，第二个图像用于填充钻石。

有关精灵图像（和示例）的更多信息可以在W3schools上找到：

这是否回答了你的问题？如果您发布一些代码，我可以告诉您它是如何工作的。

如何在钻石盒中填充一些颜色和文字？

3 个答案: