<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;margin-top:25px;"> <div class="row"> <h2>CARD TEMPLATE 1</h2> <div class="col-md-4 col-sm-6"> <a href="https://ornek.com" style="text-decoration:none; color:inherit;"> <div class="panel panel-default"> <div class="panel-body text-center"> <img class="img-responsive" style="width:30%; margin:8% auto 0 auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbPAyP3MLeedSswK9Cd7CXnT_FN0KY_xe6hVhFCvP3TifQCJwyrqsdT5gtGM_YeqZUmGscRlrRDaMX68miDzTN8gqIiv0_b1-El43znKphYszpw35QtMftjkIzE9H9uyQ1WA-7IL9bLdl31bsQ5xmnzzg_eXe_guLUCK8TabANMe399qFew4JziphTTU/s1600/tamyeni.png" /> <h3>Başlık</h3> <p>Evet</p> <div class="btn btn-primary btn-block btn-lg"> Devamını Oku </div> </div> </div> </a> <a href="https://ornek.com" style="text-decoration:none; color:inherit;"> <div class="panel panel-default"> <div class="panel-body text-center"> <img class="img-responsive center-block" style="width:30%;margin-top:8%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbPAyP3MLeedSswK9Cd7CXnT_FN0KY_xe6hVhFCvP3TifQCJwyrqsdT5gtGM_YeqZUmGscRlrRDaMX68miDzTN8gqIiv0_b1-El43znKphYszpw35QtMftjkIzE9H9uyQ1WA-7IL9bLdl31bsQ5xmnzzg_eXe_guLUCK8TabANMe399qFew4JziphTTU/s1600/tamyeni.png" /> <h3>Başlık</h3> <p>Evet</p> <div class="btn btn-primary btn-block btn-lg"> Devamını Oku </div> </div> </div> </a> </div> </div> </div>

.panel { transition: 0.3s; } .panel:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: translateY(-5px); } .panel { border: none; box-shadow: none; /* gölgeyi de kaldırır */ }