Max Njoroge Max Njoroge - 4 months ago 15
CSS Question

Resize hover_mask together with image

I have an events website, if you hover the mouse over an image at a browser width of 880px and below, the hover_mask does not resize with the image, it looks bad. This is a snippet of the problematic code but here's the full css css_file and a sample webpage webpage_sample The css problem code is the last two

.view .mask, .view .content {}
and
.view a.info, .view a.info2, .view a.info3 {}

Please look at my full css code, it's not big and help. I'm trying to get the hover mask to resize in uniform with the image up to browser width of 600px which is the website min-width. Thanks!



@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;}
}

<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>




Answer

First, you need to fix an <link> (line 24) tag that has an html instead of a css in your <head> ,

second make this changes to your html (remove <img>) and edit img_mask2.css,

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

third, clean up you code (it's quite a mess), upload and it's all done!

/* 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); }
}
<!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>