Articles cards inspired by Vogue

In this example below you will see how to do a Articles cards inspired by Vogue with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Articles cards inspired by Vogue</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>

  
<main>
  <article class="newsArticle">
    <section class="articleContent">
      <h1>Collection été 2016</h1>
      <p class="articleAuthor">by Vogue</p>
      <P class="articleIntroduction"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aliquid laudantium incidunt quaerat fugiat, modi, veritatis dignissimos adipisci temporibus velit dolorum excepturi omnis esse officia (...)</P>
      <p class="articleDate">24/06/16</p><a class="articleCTA" href="#">Lire la suite</a>
    </section>
    <figure class="articleFigure"> <img src="http://media.vogue.com/r/c_1,h_4000,w_3280/2015/08/10/empire-cast-vogue-september-2015-03.jpg" alt="Vogue shooting"/>
      <figcaption>Photo de Tokyo Hotel par Vogue</figcaption>
    </figure>
  </article>
</main>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Maxiconnect/articles-cards-inspired-by-vogue-rLjMrz */
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i|Roboto);
body,
body *,
*::after,
*::before {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figure,
figcaption {
  margin: 0;
  padding: 0;
}

p {
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
  color: #000;
}

body {
  width: 100%;
  height: 100%;
  background-color: #FFF;
}
body::before {
  content: ' ';
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #cbac59;
}

.newsArticle {
  width: 600px;
  height: 300px;
  margin: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background-color: #FFF;
  border: 1px solid #bfbfbf;
}
.newsArticle .articleContent {
  width: 50%;
  height: 100%;
  padding: 20px;
  padding-right: 26px;
  position: relative;
}
.newsArticle .articleContent h1 {
  font-family: "Playfair Display", serif;
  font-size: 1.5em;
  font-weight: normal;
}
.newsArticle .articleContent .articleAuthor {
  margin-top: 2px;
  margin-left: 8px;
  margin-bottom: 16px;
  font-family: "Playfair Display", serif;
  font-size: .9em;
  font-style: italic;
  color: #cbac59;
}
.newsArticle .articleContent .articleIntroduction {
  font-size: .9em;
  line-height: 1.5em;
}
.newsArticle .articleContent .articleDate {
  display: block;
  position: absolute;
  bottom: 20px;
  font-size: .8em;
  color: #bfbfbf;
}
.newsArticle .articleContent .articleCTA {
  display: block;
  padding-right: 20px;
  position: absolute;
  bottom: 30px;
  right: 26px;
  font-family: "Roboto", sans-serif;
  font-size: .8em;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  color: #000;
  opacity: 0;
  transition: all .4s ease-in-out;
}
.newsArticle .articleContent .articleCTA::before {
  content: ' ';
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(http://image.noelshack.com/fichiers/2016/25/1466774910-arrow-voguecard.png);
  background-repeat: no-repeat;
}
.newsArticle .articleFigure {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  transition: all .4s ease-in-out;
  overflow: hidden;
}
.newsArticle .articleFigure img {
  display: block;
  min-width: 110%;
  min-height: 110%;
  max-width: 150%;
  maw-height: 150%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  transition: all .4s ease-in-out;
}
.newsArticle .articleFigure figcaption {
  display: none;
}
.newsArticle:hover .articleCTA {
  bottom: 20px;
  opacity: 1;
}
.newsArticle:hover .articleFigure {
  transform: scale(1.1);
  box-shadow: -9px -5px 110px -32px rgba(0, 0, 0, 0.3);
}
.newsArticle:hover .articleFigure img {
  transform: translateY(-50%) translateX(-50%) scale(0.9);
}


/*Downloaded from https://www.codeseek.co/Maxiconnect/articles-cards-inspired-by-vogue-rLjMrz */
var article = document.querySelector('.newsArticle');
var originalLink = article.querySelector('.articleCTA');
var newLink = document.createElement('a');

newLink.href = originalLink.getAttribute('href');

while (article.firstChild) {
  var element = article.firstChild;
  var clone = element.cloneNode(true);
  newLink.appendChild(clone);
  article.removeChild(element);
}

article.appendChild(newLink);

Comments