Question

我有一个活动网站，如果您将鼠标悬停在浏览器宽度为880px及以下的图像上，则hover_mask不会随图像调整大小，看起来很糟糕。这是有问题的代码片段，但这里是完整的css css_file和示例网页webpage_sample css问题代码是最后两个 .view .mask, .view .content {}和.view a.info, .view a.info2, .view a.info3 {} 请查看我的完整css代码，它不大并且有帮助。我试图让悬停掩码调整大小，图像最大为浏览器宽度600px，即网站最小宽度。谢谢！

＆＃13;

@media only screen and (max-width: 880px){

   .view {
      width: 94%;
      height: 94%;}

   .view img {
      width: 94%;
      height: 94%;}

   .view .mask, .view .content {
      width: 94%;
      height: 94%;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;}

   .view a.info, .view a.info2, .view a.info3 {
      display: inline-block;
      text-decoration: none;
      margin:15px;
      text-indent:-9999px;
      width:50px;
      height:50px;}
}

＆＃13;

<div class="view image third-effect">
<img itemprop="image" draggable="false" src="img/events/1mon/1.jpg" alt=""  >
<br><br>
<div class="mask">
    <a href="#" class="socialink info"></a>
    <a href="#" class="socialink info2"></a>
    <a href="#" class="socialink info3"></a>
</div>
</div>

＆＃13;

Answer 1

首先，您需要修复<link> (line 24)中包含html而不是css的<head>代码，

~~第二次对您的html进行更改（删除<img>）并修改img_mask2.css~~ ，

更新：img {position absolute: top:50%; left: 50%; transform: translate(-50%, -50%);

第三，清理你的代码（它很乱），上传并完成所有工作！

＆＃13;

/* img_mask2.css */
.view {
  width: 800px;
  height: 300px;
  margin-bottom: 46px;  
  border: 0px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;   
  cursor: default;
  overflow: hidden;
}
.view .mask, .view .content {
  position: absolute;
  top: 0;
  left: 0;
}
.view img {
  display: block;
  position: relative;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
}
.third-effect .mask {
  opacity: 0;
  width: 100%; height: 100%;
  overflow:visible;
  background: rgba(0,0,0,0.7);
  box-sizing:border-box;
  transition: all 0.2s ease-in-out;
}
.third-effect:hover .mask { opacity: 1; }
.view a.socialink {
  display: inline-block;
  text-decoration: none;
  margin:15px;
  text-indent:-9999px;
  width:50px;
  height:50px;
}
.view a.info1 { background:url(http://deez.site90.com/main/css/img/link.png) center no-repeat; }
.view a.info2 { background:url(http://deez.site90.com/main/css/img/link2.png) center no-repeat; }
.view a.info3 { background:url(http://deez.site90.com/main/css/img/link3.png) center no-repeat; }
.third-effect a.socialink {
  position: relative;
  top: 110px;
  opacity: 0;
  transition: opacity 0.3s 0s ease-in-out;
}
.third-effect:hover a.socialink {
  opacity:1;
  transition-delay: 0.1s;
}
@media only screen and (max-width: 880px){
  .view { width: calc(100% - 60px); }
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/search.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/search_result.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/normalize.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/preloader.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/ad-slide.css" media="all">
    <!--link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/img_mask2.css" media="all"-->
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/default.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/top.css" media="all"> 
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/jquery.slide-over.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/email_popup.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/plugin.css" media="all">
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/slidevent.css" media="all"> 
    <link rel="stylesheet" type="text/css" href="http://deez.site90.com/main/css/notificationFx.css" media="all">
  </head>
  <body>
    <div id="band" class="banner" itemscope="" itemtype="http://schema.org/SocialEvent">
      <div class="container">
        <div class="view image third-effect" tittle="Dundaah nairobi raves clubs nightlife clubbing parties">
          <img itemprop="image" draggable="false" src="http://deez.site90.com/main/img/events/7sun/1.jpg" alt="Dundaah nairobi raves clubs nightlife clubbing parties">
          <div class="mask">
            <a href="#" class="socialink info1"></a>
            <a href="#" class="socialink info2"></a>
            <a href="#" class="socialink info3"></a>
          </div>
        </div>
        <div class="title">
          <h2 itemprop="name">Friday Mush Up</h2>
          <span itemprop="location" class="byline">
            <a class="fahrenheit club_link" href="javascript:void(0)">Club Fahrenheit</a>, embakasi | Dj Denz
          </span>
        </div>
        <div class="paragraph" itemprop="description"><p> Damn, kesho ni Monday. Don't sweat it,  might as well have a memorable  weekend, as well as win some stuff. You guys bring the talent best or worst all winners. Complete with beer drinking and eating competitions. Dress code, sexy &amp; elegant cause there's an award for that too.</p>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

＆＃13;

将hover_mask与图像

1 个答案: