XDXDXS<body>
  <div class="card-wrapper">
    <div class="card">
      <div class="image-wrapper">
        <a class="image-link" href="">
<img src='https://drscdn.500px.org/photo/92064849/m%3D900/v2?webp=true&sig=11d9fce5c5ec6d7b5ace21eff0cf8103b220658bc787b801dfe37ddc8e0b3d48' alt='Beautiful woman face by Oleg Gekman on 500px.com'>
        <a/>
      </div>
      <div class="text-box-wrapper">
      <div class="text-box">
        <h1 class="heading">
          Fashion Week Styles
        </h1>

        <p  class="text">
          Let's get this straight out of the way. Fashion in 2018 has been really hot. From Gucci sandals to Fendi handbags, we saw all of our favorite brands . .
        </p>
      </div>
     </div>
      
      <div class="button-wrapper">
          <a class="button" href="">
            Read More
          </a>
      </div>
    </div>
  </div>
    
</body>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);


* {
  margin: 0;
  padding: 0;
}

.card-wrapper {
  padding: 2%;
}

.card-wrapper .card{
  margin: 0 auto;
}

.card {
  position relative;
  max-width: 300px;
  background-color: #FEEFDE;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 10px;
  box-shadow: 1px 2px 8px rgba(100, 100, 100, 0.1);
}

.image-wrapper {
  background-color: red;
  width: auto;
  height: 200px;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

img:hover {
 -webkit-transform: scale3d(1.2, 1.2, 1);
  transform: scale3d(1.2, 1.2, 1);
  transition: all 1s linear;
}

.text-box-wrapper {
 padding: 20px 
}

.heading {
  font-family: 'Playfair-Display';
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
}

.heading::after {
  content: '';
  display: block;
  margin-top: 0.5em;
  width: 30px;
  height: 5px;
  background-color: black;
}

.text {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 12px;
  padding-top: 10px;
  line-height: 2;
}

.button {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 10px;
  
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 700;
  color: #8C5450;
  text-decoration: none;
 
}

.button:hover {
  color: black;

  transition: linear 0.2s;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.