foto about page

In this example below you will see how to do a foto about page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>foto about page</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="foto-about">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQpNQi447y1gyxWgF4Xb6KuxRfyjRxV44rXnEZwUR4BK8TN5tLP4g" alt="" />
  <div class="overlay">
    <p>Вы также получите отличную панель с множеством быстрых опций и некоторыми шорткодами. Ozun — это тема SEO и с оптимизированной скоростью. У темы интегрированы Google Maps, и она является мобильно дружественной. Фоны полностью настраиваются как с анимацией, так и с Parallax-совместимостью.</p>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/foto-about-page-ybyzaJ */
.foto-about {
  width: 200px;
  position: relative;
  overflow:hidden;
  
}
img {
  width: 100%;
}
.overlay {
  position: absolute;
  background: rgba(231,16,137, .7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity:0;
  transition: ease .5s;
}
p {
  color: #fff;
  font-size: 14px;
  padding: 20px 10px;
}
.foto-about:hover .overlay {
  opacity:1;
}

Comments