<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="card"> <h1>I think, therefore I am.</h1> <div class="card__content"> <i>HARUN PEHLİVAN </i> <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a><i>7+24 ONLİNE</i> HP IT GROUP 2008 TEBİM 2012 TEBİTAGEM </div> <span class="i-quote"></span> <div class="card__overlay card__overlay--1"></div> <div class="card__overlay card__overlay--2"></div> <div class="card__overlay card__overlay--3"></div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300); * { padding: 0; margin: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #F3F3F3; } .wrapper { position: relative; z-index: 1; overflow: hidden; } h1 { position: relative; margin-top: 0; padding-top: 35px; color: white; font-family: 'Times New Roman'; font-size: 28px; font-weight: 300; text-align: center; z-index: 5; &:after { content: ''; position: absolute; top: 110px; left: calc(50% - 1px); width: 2px; height: 1px; background-color: white; opacity: 0; transition: .9s ease; } } .card { width: 350px; height: 500px; background-color: #292B33; background-image: url(https://udemy-images.udemy.com/user/200_H/388551_6f04_77.jpg); background-size: cover; cursor: pointer; .i-quote { position: absolute; content: ''; width: 32px; height: 32px; top: calc(50% - 16px); left: calc(50% - 16px); background-image: url(https://cdn.pbrd.co/images/21KhDkyI.png); z-index: 5; opacity: .1; } } .card__content { position: relative; padding: 75px 35px 0 35px; color: white; font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; opacity: 0; z-index: 5; transition: opacity .9s; } .card__overlay { position: absolute; border-radius: 50%; background-color: #000; z-index: 2; transition: all .9s; } .card__overlay--1 { top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; opacity: .6; transition: all .3s ease; } .card__overlay--2 { top: calc(50% - 37.5px); left: calc(50% - 37.5px); width: 75px; height: 75px; opacity: .4; transition: all .6s ease; } .card__overlay--3 { top: calc(50% - 50px); left: calc(50% - 50px); width: 100px; height: 100px; opacity: .2; transition: all .9s ease; } .js-trigger { h1:after { content: ''; position: absolute; top: 110px; left: calc(50% - 75px); width: 150px; height: 1px; background-color: white; opacity: .3; } .card__overlay { width: 620px; height: 620px; top: calc(50% - 310px); left: calc(50% - 310px); } .card__content { opacity: 1; } .i-quote { opacity: 0; } }

$('.card').on('click', function() { $(this).toggleClass('js-trigger'); });