foto about page

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

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
Copyright DM_Daria ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



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



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