How To Hover,change,toggle A Picture With Jquery

January 31, 2024 Post a Comment

I am working on my project and I am trying to make this . I want to make everything work on click for every image (so every image would have they own paper), need this to hover an

Solution 1:

Hope you are looking for something like this

HTML

<!-- content to be placed inside <body>…</body> --><divclass='circle-container'><!--<a href='#' class='circle center'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
        <div class="content hidden">Content1</div>--><ahref='#'class='circle deg0'><imgsrc='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a><divclass="content">Content1</div><ahref='#'class='circle deg45'><imgsrc='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a><divclass="content hidden">Content2</div><ahref='#'class='circle deg135'><imgsrc='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg'></a><divclass="content hidden">Content3</div><ahref='#'class='circle deg180'><imgsrc='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg'></a><divclass="content hidden">Content4</div><ahref='#'class='circle deg225'><imgsrc='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg'></a><divclass="content hidden">Content5</div><ahref='#'class='circle deg315'><imgsrc='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a><divclass="content hidden">Content6</div></div>

CSS

/**
 * Position icons into circle (SO)
 * http://stackoverflow.com/q/12813573/1397351 
 */.hidden {
    display:none;
}
.active {
    filter: brightness(200%);
    border-radius:50px;
    transition: all 1s;
}
.content {
    position:absolute;
    padding:10px;
    border:1px solid #dedede;
    border-radius:5px;
    background: #eeeeee;
    top:46%;
    left:41%;
}
.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*//*border: dashed 1px;*/border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-containera {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
    /* 2em = 4em/2 *//* half the width */
}
.circle-containerimg {
    display: block;
    width: 100%;
}
.deg0 {
    transform: translate(12em);
}
/* 12em = half the width of the wrapper */.deg45 {
    transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
    transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
    transform: translate(-12em);
}
.deg225 {
    transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
    transform: rotate(315deg) translate(12em) rotate(-315deg);
}
/* this is just for showing the angle on hover */.circle-containera:not(.center):before {
    position: absolute;
    width: 4em;
    color: white;
    opacity: 0;
    background: rgba(0, 0, 0, .5);
    font: 1.25em/3.45 Courier, monospace;
    letter-spacing: 2px;
    text-decoration: none;
    text-indent: -2em;
    text-shadow: 00 .1em deeppink;
    transition: .7s;
    /* only works in Firefox *//* content: attr(class)'°';*/
}
.circle-containera:hover:before {
    opacity: 1;
}
/* this is for showing the circle on which the images are placed */.circle-container:after {
    position: absolute;
    top: 2.8em;
    left: 2.8em;
    width: 24em;
    height: 24em;
    /*border: dashed 1px deeppink;*/border-radius: 50%;
    opacity: .3;
    pointer-events: none;
    content:'';
}
.circle-container:hover:after {
    opacity: 1;
}
.circle-containera:not(.center):after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 00 .5em .5em white;
    margin: -2px;
    background: deeppink;
    opacity: .3;
    content:'';
}
.circle-container:hovera:after {
    opacity: 1;
}
.circle-containera:hover:after {
    opacity: .3;
}

Script

$(".circle").click(function () {
    $(".content").hide(800);
    $(".circle").removeClass("active");
    $(this).addClass("active");
    $(this).next(".content").slideDown(1000);
});

Fiddle Demo

Solution 2:

This is what you need exactly : Fiddle example

Complete work is of CSS only:

ullia {
    width:134px;
    height:53px;
    display:block;
}
.iconOne {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -82px -58px;
}
.iconTwo {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -244px -58px;
}
.iconThree {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -403px -58px;
}
a.iconOne:hover {
    background-position:-82px -123px;
}
li.activea.iconOne:hover, li.activea.iconOne {
    background-position:-82px -188px;
}
a.iconTwo:hover {
    background-position: -244px -123px;
}
li.activea.iconTwo:hover, li.activea.iconTwo {
    background-position: -244px -188px;
}
a.iconThree:hover {
    background-position:-403px -123px;
}
li.activea.iconThree:hover, li.activea.iconThree {
    background-position:-403px -188px;
}

And use above mentioned classes:

<ul><li><ahref="#"class="iconOne"></a></li><li><ahref="#"class="iconTwo"></a></li><li><ahref="#"class="iconThree"></a></li></ul>

Html5 Lite

How To Hover,change,toggle A Picture With Jquery

Solution 1:

Solution 2:

Post a Comment for "How To Hover,change,toggle A Picture With Jquery"