How To Hover,change,toggle A Picture With JQuery
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> -->
<div class='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>--> <a href='#' class='circle deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a>
<div class="content">Content1</div> <a href='#' class='circle deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a>
<div class="content hidden">Content2</div> <a href='#' class='circle deg135'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg'></a>
<div class="content hidden">Content3</div> <a href='#' class='circle deg180'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg'></a>
<div class="content hidden">Content4</div> <a href='#' class='circle deg225'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg'></a>
<div class="content hidden">Content5</div> <a href='#' class='circle deg315'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
<div class="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-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
/* 2em = 4em/2 */
/* half the width */
}
.circle-container img {
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-container a: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: 0 0 .1em deeppink;
transition: .7s;
/* only works in Firefox */
/* content: attr(class)'°';*/
}
.circle-container a: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-container a:not(.center):after {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: deeppink;
opacity: .3;
content:'';
}
.circle-container:hover a:after {
opacity: 1;
}
.circle-container a:hover:after {
opacity: .3;
}
Script
$(".circle").click(function () {
$(".content").hide(800);
$(".circle").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Solution 2:
This is what you need exactly : Fiddle example
Complete work is of CSS only:
ul li a {
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.active a.iconOne:hover, li.active a.iconOne {
background-position:-82px -188px;
}
a.iconTwo:hover {
background-position: -244px -123px;
}
li.active a.iconTwo:hover, li.active a.iconTwo {
background-position: -244px -188px;
}
a.iconThree:hover {
background-position:-403px -123px;
}
li.active a.iconThree:hover, li.active a.iconThree {
background-position:-403px -188px;
}
And use above mentioned classes:
<ul>
<li>
<a href="#" class="iconOne"></a>
</li>
<li>
<a href="#" class="iconTwo"></a>
</li>
<li>
<a href="#" class="iconThree"></a>
</li>
</ul>
Post a Comment for "How To Hover,change,toggle A Picture With JQuery"