image caption exercise

image caption exercise.markdown

image caption exercise

use data attribute and pseudoelement

A Pen by cjxw87 on CodePen.

License.

index.html

<a class="caption"
   href="http://cargocollective.com/jaimemartinez/Illustration"
   data-title="Smug Eagle"
   data-description="I watched the four riders ...">
<img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/2.jpg" alt="Illustration of Smug Eagle" />
</a>


<a class="caption1"
   href="http://cargocollective.com/jaimemartinez/Illustration"
   data-title="Smug Eagle"
   data-description="I watched the four riders ...">
<img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/1.jpg" alt="Illustration of Smug Eagle" />
</a>

style.css

.caption{
            display:inline-block;
            position: relative;
            margin: 10px;
            overflow: hidden;

        }

        .caption img{
            display: block;
            max-width: 100%;
            transition: opacoty 0.3s ease-in-out;
         }

        .caption:hover img{
            opacity: 0.5;
        }


        .caption::before,
        .caption::after{
           position:absolute;
            box-sizing:border-box;
            width: 100%;
            height: 50%;
            color: #fff;
            z-index: 1;
            transition: transform 0.5s ease-in-out;
        }

        .caption::before{
            content:attr(data-title);
            top: 0;
            background: #0083ab;
            font-size: 40px;
            font-weight: 300;
            padding: 30px;
            transform: translateY(-100%);

        }

        .caption::after{
            content: '....' attr(data-description) '....';
            top: 50%;
            background: #f27545;
            font-size: 14px;
            padding: 20px;
            transform: translateY(100%);
        }
        
        .caption:hover::after,
        .caption:hover::before{
            transform: translateY(0%);
        }


.caption1{
  display:inline-block;
  position:relative;
  margin:10px;
  overflow:hidden;
  background:rgba(0,0,0,0.2);
  transition:background 0.3s ease-in-out;
}

.caption1:hover{
  background:rgba(0,0,0,0);
}

.caption1 img{
  display:block;
  max-width:100%;
  transition:transform 0.3s ease-in-out;
}

.caption1:hover img{
  transform:translateX(100%);
}


.caption1::before,
.caption1::after{
  box-sizing:border-box;
  position:absolute;
  width:100%;
  z-index:-1;
  background:#cecece;
  transform:translateX(-30%);
  transition:transform 0.3s ease-in-out;
}


.caption1::before {
    content: attr(data-title);
    height: 30%;
    color: #05b19a;
    font-size: 40px;
    font-weight: 300;
    padding: 30px;
}
 
.caption1::after {
    content: '\201C' attr(data-description) '\201D';
    top: 30%;
    height: 70%;
    color: #fff;
    font-size: 14px;
    padding: 20px 30px;
}


.caption1:hover::before,
.caption1:hover::after{
  transform:translateX(0%);
}