CSS

CSS ile resimlere zoom efekti nasıl verilir ?

Bu makalede resimlerin üzerine gelindiğinde nasıl zoom verilebileceğini göreceğiz. Zoom efekti için CSS‘in scale methodunu kullanacağız. Bir örnek ile açıklayalım.

HTML yapısı;

<div class = "content">

    <ul class="navbar">
      <li><a href="">Anasayfa</a></li>
      <li><a href="">Hakkımızda</a></li>
      <li><a href="">Referanslarımız</a></li>
      <li><a href="">İletişim</a></li>
    </ul>
    
    <div class="website_desc">
      <h2 style = "text-align:center;">Test etmek için resimlerin üzerine geliniz :)</h2>
      <br class = "clear" />
      <div class="center">
        <div class = "row">
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
          <div class="image_box">
            <div class="image_content">
              <div class="image">
                <a href="">
                  <img src="http://vizeofisi.com.tr/upload/thumb/ulke-banner-93448.jpg" alt="">
                </a>
              </div>
              <div class="desc">
                <div class="title">Test bir başlık</div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sint quod repudiandae, nihil eius, voluptate, quam mollitia quas aliquam accusantium, error! Dolores omnis dolore possimus facilis, accusamus, laborum sint neque.
                </div>
              </div>
            </div>
          </div>
        </div>
        


      </div>
    </div>
    
  </div>

CSS yapısı;

@import url('https://fonts.googleapis.com/css?family=Roboto');
  * {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Roboto', sans-serif;}
  a {text-decoration: none;}


  .content {
    padding:25px;
    width:1170px;
    margin:50px auto;
    font-size:15px;
    font-family: tahoma;
    color:#565656;
    line-height:22px;
  }

  .content:after {
    content:'';
    display:block;
    clear:both;
  }

  .website_desc {
    margin-top:40px;
  }

  .center {
    max-width:1170px;
    margin:0px auto;
  }

  .navbar {
    width:100%;
    border-top:1px solid #ededed;
    border-bottom:1px solid #ededed;
    text-align:center;
  }

  .navbar:after {
    content:'';
    display:block;
    clear:both;
  }

  .navbar > li {
    display: inline-block;
    position: relative;
  }

  .navbar > li > a {
    display:block;
    padding:0 25px;
    line-height:50px;
    color:#565656;
  }

  .row {
    margin-left:-15px;
    margin-right:-15px;
  }

  .image_box {
    width:25%;
    float:left;
    padding:0 15px;
    margin-bottom: 30px;
  }

  .image_content {
    border:1px solid #ededed;
    box-shadow:0 0 10px #ededed;
    position: relative;
  }

  .image_box .image {
    overflow: hidden;
  }

  .image_box .image a {
    display: block;
    position: relative;
  }

  .image_box .image a:after {
    content:'';
    position: absolute;
    display: block;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,0.4);
    transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    opacity:0;
    visibility: hidden;
  }

  .image_box .image img {
    width:100%;
    vertical-align: middle;
    transform:scale(1);
    -webkit-transform:scale(1);
    transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
  }

  .title {
    padding:10px 12px;
    font-weight: bold;
    font-size:17px;
  }

  .text {
    padding:7px 12px;
    font-size:14px;
  }

  .image_content:hover .image a:after {
    opacity:1;
    visibility: visible;
  }

  .image_content:hover .image a img {
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
  }

Örneğin canlı hali için buraya tıklayınız.

2 Comments on “CSS ile resimlere zoom efekti nasıl verilir ?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir