MTT NEW !!2

In this example below you will see how to do a MTT NEW !!2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by RobertEatough, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RobertEatough ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>MTT NEW !!2</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="masonry-list">
  <li class="tile-person">
    <a>
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p><br>
                   <img src="https://www.xero.com/images/resellers/icon-signup-linkedin.svg" alt=""> 
        </div>
      </div>
    </a>
  </li>
   <li class="tile-person">
    <a href="#">
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p>
        </div>
      </div>
    </a>
  </li>
   <li class="tile-person">
    <a href="#">
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p>
        </div>
      </div>
    </a>
  </li>
   <li class="tile-person">
    <a href="#">
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p>
        </div>
      </div>
    </a>
  </li>
   <li class="tile-person">
    <a href="#">
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p>
        </div>
      </div>
    </a>
  </li>
  <li class="tile-person">
    <a href="#">
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p>
        </div>
      </div>
    </a>
  </li>
  <li class="tile-person">
    <a href="#">
      <div class="tile-primary-content">
        <img src="http://www.thinkcreative.uk.com/wp-content/uploads/2014/01/Paul-Hough-2.jpg" alt="">
      </div>
      <div class="tile-secondary-content">
        <div id="coffee" class="tile-secondary-container">
          <h2>Chris Grabinski</h2>
          <p>Front-end Development</p>
        </div>
      </div>
    </a>
  </li>
  <li class="tile-facebook">
    <a href="#">
      <div class="tile-primary-content">
        <h2>Facebook</h2>
        <p>Don't expect to reach us on the phone today. We're BBQing! :)</p>
      </div>
      <div class="tile-secondary-content">
        <p>Like us on Facebook</p>
      </div>
    </a>
  </li>
  <li class="tile-twitter">
    <a href="https://twitter.com/chrisgrabinski">
      <div class="tile-primary-content">
        <h2>Twitter</h2>
        <p>@chrisgrabinski Lol. What's wrong with your CSS, bro?</p>
      </div>
      <div class="tile-secondary-content">
        <p>Follow us on Twitter</p>
      </div>
    </a>
  </li>
  <li class="tile-job">
    <a href="#">
      <div class="tile-primary-content">
        <h2>Career</h2>
        <p>We're looking for consultants and other experts in advertising</p>
      </div>
      <div class="tile-secondary-content">
        <p>Apply now and become successful</p>
      </div>
    </a>
  </li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/RobertEatough/mtt-new-2-YqOqgQ */
.masonry-list {
  	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}
.masonry-list li {
  float: left;
  height: 300px;
  padding: 0 0px 0px 0;
  position: relative;
	overflow: hidden;
	width: 16.6666667%; /* Fallback */
	width: -webkit-calc(100% / 5);
	width: calc(100% / 5);
}
.masonry-list li:focus a::after, .masonry-list li:hover a::after {
  opacity: 1;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.masonry-list li:focus .tile-primary-content img, .masonry-list li:hover .tile-primary-content img {
  -moz-transform: scale3d(1.2, 1.2, 0);
  -webkit-transform: scale3d(1.2, 1.2, 0);
  transform: scale3d(1.2, 1.2, 0);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-transition: -moz-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
  -o-transition: -o-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
  -webkit-transition: -webkit-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
  transition: transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
}
.masonry-list li:focus p,
.masonry-list li:focus h2,
.masonry-list li:focus .tile-secondary-content, .masonry-list li:hover p,
.masonry-list li:hover h2,
.masonry-list li:hover .tile-secondary-content {
  opacity: 1;
}
.masonry-list li a::after {
  bottom: 40px;
  content: '';
  display: block;
  height: 17px;
  opacity: 0;
  position: absolute;
  right: 40px;
  width: 17px;
  -moz-transform: translate3d(-10px, -10px, 0);
  -webkit-transform: translate3d(-10px, -10px, 0);
  transform: translate3d(-10px, -10px, 0);
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}
.masonry-list li.tile-job:focus .tile-primary-content p, .masonry-list li.tile-job:hover .tile-primary-content p, .masonry-list li.tile-facebook:focus .tile-primary-content p, .masonry-list li.tile-facebook:hover .tile-primary-content p, .masonry-list li.tile-twitter:focus .tile-primary-content p, .masonry-list li.tile-twitter:hover .tile-primary-content p {
  -moz-transform: translate3d(150%, 0, 0);
  -webkit-transform: translate3d(150%, 0, 0);
  transform: translate3d(150%, 0, 0);
  -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
}
.masonry-list li.tile-job:focus .tile-secondary-content p, .masonry-list li.tile-job:hover .tile-secondary-content p, .masonry-list li.tile-facebook:focus .tile-secondary-content p, .masonry-list li.tile-facebook:hover .tile-secondary-content p, .masonry-list li.tile-twitter:focus .tile-secondary-content p, .masonry-list li.tile-twitter:hover .tile-secondary-content p {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
  -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  -webkit-transition-delay: 150ms;
  transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
}
.masonry-list li.tile-job .tile-primary-content p, .masonry-list li.tile-facebook .tile-primary-content p, .masonry-list li.tile-twitter .tile-primary-content p {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
  -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  -webkit-transition-delay: 150ms;
  transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
}
.masonry-list li.tile-job .tile-secondary-content p, .masonry-list li.tile-facebook .tile-secondary-content p, .masonry-list li.tile-twitter .tile-secondary-content p {
  opacity: 1;
  -moz-transform: translate3d(-150%, 0, 0);
  -webkit-transform: translate3d(-150%, 0, 0);
  transform: translate3d(-150%, 0, 0);
  -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
  transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
}
.masonry-list li.tile-job .tile-primary-content {
  background-color: #ffcb05;
}
.masonry-list li.tile-facebook a::after {
  background-image: url("");
  background-repeat: no-repeat;
  height: 45px;
  opacity: 1;
  width: 22px;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.masonry-list li.tile-facebook .tile-primary-content {
  background-color: #3b539b;
}
.masonry-list li.tile-twitter a::after {
  background-image: url("");
  background-repeat: no-repeat;
  height: 37px;
  opacity: 1;
  width: 45px;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.masonry-list li.tile-twitter .tile-primary-content {
  background-color: #00afe0;
}
.masonry-list li.tile-case .tile-primary-content, .masonry-list li.tile-client .tile-primary-content, .masonry-list li.tile-person .tile-primary-content {
  padding: 0;
}
.masonry-list li.tile-case .tile-secondary-content, .masonry-list li.tile-client .tile-secondary-content, .masonry-list li.tile-person .tile-secondary-content {
  -moz-transition: opacity 100ms ease-out;
  -o-transition: opacity 100ms ease-out;
  -webkit-transition: opacity 100ms ease-out;
  transition: opacity 100ms ease-out;
}
.masonry-list li.tile-case #coffee, .masonry-list li.tile-client #coffee, .masonry-list li.tile-person #coffee {
  background-image: url("http://i.giphy.com/inECjKmGYzGms.gif");
}
.masonry-list li.tile-client a::after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFQzVFRUY1MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFQzVFRUY2MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODFBODJDMDAwN0Q2MTFFMzk5MTVCODIwM0E0MEVCQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEVDNUVFRjQwN0Q5MTFFMzk5MTVCODIwM0E0MEVCQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz48Qmb2AAAAuklEQVR42uyTMQ7CMAxF7QTlpJygZ2DNyAILA4ip3I8Bgi3Z1A20IVRIDPnSX9Lk/Z8mwZQSiBz5DsuEwrkpkOXJJ3JcCN6Rj8IDoOaefE6DIu+m0kjeGwbzvJOUYBp0lTvQxmszdtXm7EDu01jxi8asg/wNsBNrA2bBObwmoAh+B58K2GRztiXwFFwDLhnAfi+C2WgeUa7wPPXhVqjsopU+mpdrNAPPIfjB+EgOfqgGb/AG/2f4Q4ABALW94ZuwtKIxAAAAAElFTkSuQmCC");
  height: 22px;
  width: 23px;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.masonry-list li.tile-client a:focus .tile-primary-content, .masonry-list li.tile-client a:hover .tile-primary-content {
  background-color: transparent;
}
.masonry-list li.tile-client a:focus .tile-primary-content img, .masonry-list li.tile-client a:hover .tile-primary-content img {
  -moz-transform: scale3d(1, 1, 1);
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
.masonry-list li.tile-client .tile-primary-content {
  background-color: #604951;
  -moz-transition: background-color 250ms ease-out;
  -o-transition: background-color 250ms ease-out;
  -webkit-transition: background-color 250ms ease-out;
  transition: background-color 250ms ease-out;
}
.masonry-list li.tile-person {
  text-align: center;
}
.masonry-list li.tile-person .tile-secondary-content {
  display: table;
  height: 100%;
  padding: 0;
  width: 100%;
}
.masonry-list li.tile-person .tile-secondary-container {
  display: table-cell;
  vertical-align: middle;
}
.masonry-list li.tile-person h2 {
  font-size: 24px;
  position: static;
}
.masonry-list li.tile-person p {
  color: #fff;
  font-family: 'Georgia', serif;
  font-size: 17px;
  margin: .2em;
  text-transform: none;
}
.masonry-list a,
.masonry-list button {
  color: white;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}
.masonry-list .tile-primary-content,
.masonry-list .tile-secondary-content {
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 40px;
  position: absolute;
  right: 0;
  top: 0;
}
.masonry-list .tile-primary-content {
  background-color: #a49058;
}
.masonry-list .tile-primary-content img {
  width: 100%;
  -moz-transform: scale3d(1, 1, 1);
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -moz-transition: -moz-transform 200ms ease-out;
  -o-transition: -o-transform 200ms ease-out;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
}
.masonry-list .tile-secondary-content {
  opacity: 0;
  -moz-transition: opacity 250ms ease-out;
  -o-transition: opacity 250ms ease-out;
  -webkit-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
}
.masonry-list .tile-secondary-content p,
.masonry-list .tile-secondary-content h2 {
  opacity: 0;
  -moz-transition: opacity 200ms ease-in 100ms;
  -o-transition: opacity 200ms ease-in 100ms;
  -webkit-transition: opacity 200ms ease-in;
  -webkit-transition-delay: 100ms;
  transition: opacity 200ms ease-in 100ms;
}
.masonry-list p,
.masonry-list h2 {
  text-transform: uppercase;
}
.masonry-list h2 {
  font-size: 12px;
  margin: 0;
  position: absolute;
}
.masonry-list p {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1em;
  margin: 1em 0 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: #242424;
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}




@media screen and (max-width: 1190px) {
	.masonry-list li {
		width: 20%; /* Fallback */
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
	}
}

@media screen and (max-width: 945px) {
	.masonry-list li {
		width: 25%; /* Fallback */
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 660px) {
	.masonry-list li {
		width: 33.3333333%; /* Fallback */
		width: -webkit-calc(100% / 2);
		width: calc(100% / 2);
	}
}

@media screen and (max-width: 660px) {
	.masonry-list li {
		width: 33.3333333%; /* Fallback */
		width: -webkit-calc(100% / 2);
		width: calc(100% / 2);
	}
}

@media screen and (max-width: 400px) {
	.masonry-list li {
		width: 50%; /* Fallback */
		width: -webkit-calc(100% / 1);
		width: calc(100% / 1);
	}
}

@media screen and (max-width: 300px) {
	.masonry-list li {
		width: 100%;
	}
}

Comments