CSS ব্যবহার করে হোভারে একটি চিত্রের উপর একটি জুম এফেক্ট তৈরি করছেন?

Question 1

আমি বর্তমানে আমার চারটি চিত্রের একটিতে জুম এফেক্ট তৈরি করার চেষ্টা করছি। সমস্যাটি বেশিরভাগ উদাহরণগুলি সাধারণত কিছু ধরণের প্রভাব প্রয়োগ করতে টেবিল বা মাস্ক ডিভ ব্যবহার করে।

এখানে এক উদাহরণ কার্যকরী আমি চাই কি এই ।

এটি এখন পর্যন্ত আমার কোড।

এইচটিএমএল

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>

সিএসএস

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}

#menu img {
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
}

.blog {
    height: 375px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog:hover {
    cursor: pointer;
    height:475px;
    width: 350px;
}

.music {
    height: 375px;
}

.projects {
    height: 375px;
}

.bio {
    height: 375px;
}

Question 2

CSS3 transformসম্পত্তি ব্যবহার এবং scaleঅসুস্থতা একটি জুম মত প্রভাব দেয় যা ব্যবহার সম্পর্কে কী , এইভাবে এটি করা যেতে পারে,

এইচটিএমএল

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

সিএসএস

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

এখানে একটি ডেমো ফিজল । আমি এটিকে কিছু সরল করার জন্য কিছু উপাদান সরিয়ে নিয়েছি, আপনি .imageছোট আকারের চিত্রটির ওভারফ্লোটি আড়াল করতে সর্বদা লুকানো ওভারফ্লো যুক্ত করতে পারেন ।

zoom সম্পত্তি শুধুমাত্র আইই মধ্যে কাজ করে

Question 3

আপনি এখানে যান।

ডেমো

http://jsfiddle.net/27Syr/4/

এইচটিএমএল

<div id="menu">

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
        </a>
    </div>

</div>

সিএসএস

#menu {
    text-align: center; }


.fader {
    /* Giving equal sizes to each element */
    width:    250px;
    height:   375px;

    /* Positioning elements in lines */
    display:  inline-block;

    /* This is necessary for position:absolute to work as desired */
    position: relative;

    /* Preventing zoomed images to grow outside their elements */
    overflow: hidden; }


    .fader img {
        /* Stretching the images to fill whole elements */
        width:       100%;
        height:      100%;

        /* Preventing blank space below the image */
        line-height: 0;

        /* A one-second transition was to disturbing for me */
        -webkit-transition: all 0.3s ease;
        -moz-transition:    all 0.3s ease;
        -o-transition:      all 0.3s ease;
        -ms-transition:     all 0.3s ease;
        transition:         all 0.3s ease; }

        .fader img:hover {
            /* Making images appear bigger and transparent on mouseover */
            opacity: 0.5;
            width:   120%;
            height:  120%; }

    .fader .text {
        /* Placing text behind images */
        z-index: -10;     

        /* Positioning text top-left conrner in the middle of elements */
        position: absolute;
        top:      50%;
        left:     50%; }

        .fader .text p {
            /* Positioning text contents 50% left and top relative
               to text container's top left corner */
            margin-top:  -50%; 
            margin-left: -50%; }

পরামর্শ

পরিবর্তে .fader { inline-block; }কিছু গ্রিড সিস্টেম ব্যবহার বিবেচনা করুন। আপনার পছন্দের প্রযুক্তির ভিত্তিতে, আপনি ফাউন্ডেশন , সুসি , রাজমিস্ত্রি বা তাদের বিকল্পগুলি যেতে পারেন ।

Question 4

.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}

Question 5

আমি একটি পটভূমি চিত্র ব্যবহার করতে পছন্দ করি। আমি এটি সহজ এবং আরও নমনীয় বলে মনে করি:

ডেমো

সিএসএস:

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}
.zoomimg {
    display: inline-block;
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .5s ease;
}
.zoomimg:hover {
    cursor: pointer;
    background-size: 150% 150%;
}
.blog {
    background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
    background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
    background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
    background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}

এইচটিএমএল:

<div id="menu">
    <div class="blog zoomimg"></div>
    <div class="music zoomimg"></div>
    <div class="projects zoomimg"></div>
    <div class="bio zoomimg"></div>
</div>

ওভারলে সহ ডেমো 2

Question 6

কেবল:

.grow { transition: all .2s ease-in-out; }

এটি উপাদানকে CSS এর মাধ্যমে অ্যানিমেশন নির্ধারণের অনুমতি দেবে।

.grow:hover { transform: scale(1.1); }

এটি বাড়িয়ে তুলবে!

Question 7

.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

আপনি সাধারণ অ্যানিমেশন সহ যে কোনও চিত্র জুম করতে পারেন। আপনার যা দরকার তা যদি একটি সম্পূর্ণ টিউটোরিয়াল এখানে একটি সরকারী টিউটোরিয়াল হল: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

Question 8

সমাধান 1: আপনি জুম-মাস্টার ডাউনলোড করতে পারেন ।
সমাধান 2: এখানে যান ।
সমাধান 3: আপনার নিজের কোড

.hover-zoom {
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
     transition:all 0.3s
 }
.hover-zoom:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
     transform: scale(1.5)
 }

<img class="hover-zoom"  src="https://i.stack.imgur.com/ewRqh.jpg" 
     width="100px"/>

স্নিপেট প্রসারিত করুন

Question 9

 -webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;

কেবলমাত্র উপরের ট্রানজিশনগুলির জন্য একটি নোট তৈরি করতে চান

 -webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;

এবং-মেস- অবশ্যই আই 9 এর জন্য কাজ করবেন না আপনি জানেন যে আপনি কোথা থেকে এসেছেন i

Question 10

    .img-wrap:hover img {
        transform: scale(0.8);
    }
    .img-wrap img {
        display: block;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    <div class="img-wrap">
    <img src="http://www.sampleimages/images.jpg"/> // Your image
    </div>

স্নিপেট প্রসারিত করুন

এই কোডটি কেবলমাত্র জুম-আউট এফেক্টের জন্য your আপনার স্টাইল অনুসারে ডিভ "ইম্জি-মোড়ানো" সেট করুন এবং উপরের শৈলীর ফলাফলগুলি জুম-আউট এফেক্টটি প্রবেশ করুন z জুম-ইন প্রভাবের জন্য আপনাকে অবশ্যই স্কেল মান বাড়াতে হবে (যেমন: জুম- ইন, ট্রান্সফর্ম ব্যবহার: স্কেল (1.3);

Question 11

  <div class="item">
  <img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
  <img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
  <div class="item-overlay top"></div>

সিএসএস:

.item img {

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Question 12

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
 body{ font-family: 'Muli', sans-serif; color:white;}
 #lists {
   width: 350px;
   height: 460px;
   overflow: hidden;
   background-color:#222222;
   padding:0px;
   float:left;
    margin: 10px;
 }
 
 .listimg {
   width: 100%;
   height: 220px;
   overflow: hidden;
   float: left;
  
 }
  #lists .listimg img {
   width: 350px;
   height: 220px;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 #lists:hover{cursor: pointer;}
 #lists:hover > .listimg img {
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
   -webkit-filter: blur(5px);
   filter: blur(5px);
 }

#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}

.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}

<div id="lists">
<div class="listimg">
  <img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>

<div id="lists">
<div class="listimg">
  <img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>

স্নিপেট প্রসারিত করুন

Question 13

<!DOCTYPE html>
<html>
<head>
<style>
.zoom {

  overflow: hidden;
}

.zoom img {
  transition: transform .5s ease;
}
.zoom:hover img {
  transform: scale(1.5);
}

</style>
</head>
<body>

<h1>Image Zoom On Hover</h1>
<div class="zoom">
  <img src="/image-path-url" alt="">
</div>

</body>
</html>

Question 14

আপনার ওয়েবপৃষ্ঠায় jquery.zbox.css এবং jquery.zbox.js এর সাথে jQuery জাভাস্ক্রিপ্ট লাইব্রেরি যুক্ত করুন Add

<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>

ওয়েবপৃষ্ঠায় পূর্ণ মাপের চিত্রগুলিতে ইঙ্গিত করে লিঙ্কগুলির সাথে থাম্বনেইলের একটি গ্রুপ যুক্ত করুন।

<a class="zb" rel="group" href="1.png" title="Image 1">
  <img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
  <img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
 <img src="thumb3.png">
</a>

নথি প্রস্তুত ফাংশন কল। এটাই.

দর্শন উত্সে করুন:

$(".zb").zbox();