如何在悬停时停止移动图像？

时间：2014-08-06 20:03:32

标签： html css

嗨我在悬停时制作了一个带有过渡的图像列表，但当我将鼠标悬停在另一个上时，另一个移动遍布整个地方。我虽然给他们绝对定位会起作用但它没有，所以我怎么得到它所以图像不会到处都是。感谢。

HTML 

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>

        <div class="container">
            <img class="pic" src="Chrysanthemum.jpg"/>
            <img src="Desert.jpg"/>
            <img src="Hydrangeas.jpg"/>
            <img src="Jellyfish.jpg"/>
            <img src="Koala.jpg" />
            <img src="Lighthouse.jpg"/>
            <img src="Penguins.jpg"/>
            <img src="Tulips.jpg"/>
        </div>

    </body>
</html>

CSS 

body {       
    margin:0px;
    padding:0px;
}

.container {
    background-color:#c1c1c1;
    height:400px;
    text-align:center;
}

div img {
    height:100px;
    position:relative;
    width:150px;
    top:50%;
    margin-top:-50px;
    transform:skew(30deg);
    transform:rotate(30deg);
    opacity:0.7;
    transition:all 1s ease;
}

img:hover {
    height:400px;
    width:600px;
    transform:skew(0deg);
    transform:rotate(0deg);
    opacity:1;
    overflow:hidden;
}

在这里， http://jsfiddle.net/#&togetherjs=iM1y1m1vNv

3 个答案:

答案 0 :(得分：0)

将每个图像包围在自己的容器中，并将图像的位置设置为绝对。将容器的大小设置为等于未覆盖图像的大小。使用您需要的任何布局方式，以使容器进入您想要的位置。

如：

<div class="container">
  <div class="inner-container">
      <img src="https://www.google.com/images/srpr/logo11w.png"/>
  </div>
  <div class="inner-container">
      <img src="https://www.google.com/images/srpr/logo11w.png"/>
  </div>
  <div class="inner-container">
      <img src="https://www.google.com/images/srpr/logo11w.png"/>
  </div>
  <div class="inner-container">
      <img src="https://www.google.com/images/srpr/logo11w.png"/>
  </div>
</div>

和

.container {
    background-color:#c1c1c1;
    height:400px;
    text-align:center;    
}

.inner-container {
    height:100px;
    width:150px;
}

div img {
    position:absolute;
    height:100px;
    width:150px;
    transform:skew(30deg);
    transform:rotate(30deg);
    opacity:0.7;
    transition:all 1s ease;
}

img:hover {
    position:absolute;
    height:400px;
    width:600px;
    transform:skew(0deg);
    transform:rotate(0deg);
    opacity:1;
    overflow:hidden;
}

答案 1 :(得分：0)

FIDDLE 此处

您需要为每个imgs单独设置position: absolute;到img s和累积margin-left 。由于使用CSS无法实现这一点，因此您需要使用JavaScript来实现这一目标。

我在我的例子中使用了 jQuery 。

total = $('.pic').siblings();
len = total.length;
value = 0;
offset = 80;
for (var i = 0; i <= len; i++) {
    $(total[i]).css('margin-left', value + offset + 'px');
    value += offset;
}

您可以看到offset值可以动态增加每个imgs s margin-left。

答案 2 :(得分：0)

我看到其他人已经回答了，我想我会添加这个，因为它带来了不同的方法，包括像你最初那样的轮换。

这是小提琴：http://jsfiddle.net/ctwheels/bw4z6949/

HTML 的

<body>
    <div id="me" class="container">
        <div class="table">
            <div class="tr">
                <div class="td">
                    <img class="pic" src="http://cdn.theanimals.pics/pictures/www.flashdance.co.uk/images/Webimages/Pets/W_PET1441041.jpg" />
                </div>
                <div class="td">
                    <img class="pic" src="http://www.photosjunction.com/contents/member/animals/photos/rabbit-picture-ed347.jpg" />
                </div>
                <div class="td">
                    <img class="pic" src="http://www.breederretriever.com/photopost/data/534/DSC00040.JPG" />
                </div>
                <div class="td">
                    <img class="pic" src="http://explosionhub.com/wp-content/uploads/2012/07/Cat-cats-2533807-1000-800.jpg" />
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    <img class="pic" src="http://cdn.theanimals.pics/pictures/upload.wikimedia.org/wikipedia/commons/7/75/American_Red_Fox.jpg" />
                </div>
                <div class="td">
                    <img class="pic" src="http://www.breederretriever.com/photopost/data/587/dalmatian_pup_3.JPG" />
                </div>
                <div class="td">
                    <img class="pic" src="http://www.expatads.com/adpics/-female-pug-puppy-5165b0c0271a4063038f.jpg" />
                </div>
                <div class="td">
                    <img class="pic" src="http://www.singingheartsfarm.com/news/ckeditor/filemanager/userfiles/Prince%20Momentus%20SF%2012-5-12_8934.jpg" />
                </div>
            </div>
        </div>
        <div class="hoveroutDestroyClone"></div>
    </div>
</body>

CSS 

body {
    margin:0px;
    padding:0px;
}
.container {
    background-color:#c1c1c1;
    height:400px;
    text-align:center;
}
.table {
    display:table;
    border-spacing:0px;
    border-collapse:separate;
    padding:15px;
    padding-left:15px;
    padding-top:30px;
    margin-right:auto;
    margin-left:auto;
}
.tr {
    display:table-row;
}
.td {
    padding:2px;
    display:inline-block;
}
/*Change these values to reduce or increase spacing bbetween divs/images*/

/*Horizontal spacing*/
 .tr .td:not(:first-of-type) {
    margin-left:-45px;
}
/*Vertical spacing*/
 .tr:not(:first-of-type) .td {
    margin-top:30px;
}
.td img {
    height:100px;
    width:150px;
    opacity:0.7;
    transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    /* IE 9 */
    -webkit-transform:rotate(30deg);
    /* Opera, Chrome, and Safari */
}
.myClass {
    position:absolute;
    height:100px;
    width:150px;
    overflow:hidden;
}
.hoveroutDestroyClone {
    /*Invisible div that determines when the mouse is "hovering" the inflated image*/
}
/*Change this for duration of rotation in effect - Note: For flow, change the value of the variable "myDuration" in js to the same length*/
 .rotateMeIn {
    animation:rotateIn 1s;
    -webkit-animation:rotateIn 1s;
}
/*Rotation effects*/
 @keyframes rotateIn {
    from {
        transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
    }
    to {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
}
@-webkit-keyframes rotateIn {
    from {
        transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
    }
    to {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
}
/*Change this for duration of rotation in effect - Note: For flow, change the value of the variable "myDuration" in js to the same length*/
 .rotateMeOut {
    animation:rotateOut 1s;
    -webkit-animation:rotateOut 1s;
}
/*Rotation effects*/
 @keyframes rotateOut {
    from {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
    to {
        transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
    }
}
@-webkit-keyframes rotateOut {
    from {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
    to {
        transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
    }
}

JS 

$(".pic").mouseover(

function () {

    $(".hoveroutDestroyClone").trigger("mouseleave");
    $(".hoveroutDestroyClone")
        .css({
        width: 0 + "px",
        height: 0 + "px",
        position: "absolute",
        left: 0 + "px",
        top: 0 + "px",
            "z-index": -1000
    });
    var myClone = $(this).clone();
    var leftTablePadding = parseInt($(".table").css("padding-left"), 10);

    var topTablePadding = parseInt($(".table").css("padding-top"), 10);
    var leftOffset = $(this).offset().left;
    var documentWidth = $(document).width() / 2;
    var topOffset = $(this).offset().top;
    var myHeight = 400;
    var myWidth = 600;
    var myDuration = 1000;
    $(this).css("opacity", 0);
    $(myClone)
        .appendTo(".container")
        .removeClass("pic")
        .addClass("myClass")
        .addClass("rotateMeIn")
        .css({
        left: leftOffset + leftTablePadding + "px",
        top: topOffset + topTablePadding + "px"
    })
        .animate({
        width: myWidth + "px",
        height: myHeight + "px",
        left: documentWidth - myWidth / 2 + "px", //0 + "px",
        top: 0 + "px",
        opacity: 1
    },
    myDuration,

    function () {
        $(".hoveroutDestroyClone")
            .css({
            width: $(myClone).width() + "px",
            height: $(myClone).height() + "px",
            position: "absolute",
            left: $(myClone).offset().left + "px",
            top: $(myClone).offset().top + "px",
                "z-index": 1000
        });
    });
});

$(".hoveroutDestroyClone").on("mouseleave",

function () {
    var myDuration = 1000;
    $(".myClass")
        .addClass("rotateMeOut")
        .animate({
        width: 0 + "px",
        height: 0 + "px",
        left: 0 + "px",
        top: 0 + "px",
        opacity: 0
    }, myDuration, function () {
        $(".rotateMeOut").remove();
        $(".hoveroutDestroyClone")
            .css({
            width: 0 + "px",
            height: 0 + "px",
            position: "absolute",
            left: 0 + "px",
            top: 0 + "px",
                "z-index": -1000
        });
        $(".pic")
            .animate({
            opacity: 0.7
        }, 500);
    });
});
相关问题
最新问题