JSFiddle - React, Tailwind, and code Playground

css mac window with responsive image and message

by Andrew Pougher

HTML

<div id="cover" class="container-fluid no-gutter">

    <div id="cover-item" class="row ">
      <div id="content">
  <div class="col-xs-4 text-center">
  BLABLA
  </div>
      <div class="col-xs-8">
        <div id="window-bar">
          <div class="dot red"></div>
          <div class="dot yellow"></div>
          <div class="dot green"></div>
        </div>
        <div id="cover-content">
          <img id="cover-image" src="https://placekitten.com/g/1200/1300" alt="andrewpougher.co.uk" class="css_fadein img-responsive">
          <a id="cover-content-overlay" href="#" target="_blank"></a>
          <div id="cover-content-banner" class="css_fadein">SOME TITLE HERE</div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400|Domine:400|Montserrat:700);

body{  font-family: Montserrat,Arial,sans-serif;   color:white; }
a {
  background-color: transparent;
}

 1, #cover #cover-content img, #cover #cover-content #cover-content-banner{  -webkit-transition: .3s;
  transition: .3s}

a:active,
a:hover {
  outline: 0
}
.no-gutter > [class*=col-], .no-gutter {
    padding-right: 0;
    padding-left: 0;
}


#cover #cover-item {
  position: relative;
  margin: 60px 0 0;
  box-shadow: 0 0 9px 6px rgba(0, 0, 0, .1);
  -webkit-animation: moveup .6s both;
  animation: moveup .6s both;
  z-index: 30;
  overflow:hidden
}

#window-bar {
  padding: 0 15px;
  background: #d2d3d6;
  border-top-left-radius: 7.5px;
  border-top-right-radius: 7.5px
}

#window-bar .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 2px 5px 0 0;
  background: #8e9092;
  border-radius: 100%
}

#cover #cover-content {
  overflow: hidden;
  background: #111;
}

#cover #cover-content img {
  width: 100%;
  opacity: 0;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s
}

#cover #cover-content:hover img {
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transform: translateY(-45px);
  transform: translateY(-45px)
}

#cover #cover-content #cover-content-overlay {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top:18px;
  z-index: 35
}

#cover #cover-content #cover-content-banner {
    -webkit-transition: .2s;
  transition: .2s;
  position: absolute;
  display: block;
  width: 100%;
  bottom: -60px;
  left: 0;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font: 14px / 60px Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #fff;
  background: #1085e9;
  opacity: 0
}

#cover #cover-content:hover #cover-content-banner {
  bottom: 0
}

#container {
  margin: 60px...

JavaScript

jQuery(document).ready(function($) {
  function dynamic_img_src() {
    var window_width = $(window).width(),
      target_image = $("#cover-image");
    if (600 > window_width) {
      var src = "http://brandoral.com/icons-svg/bo-icn-1.svg";
      target_image.attr("src", src);
    }
  }
  dynamic_img_src();
});