For example, this is what I have as my image map right now, made using an image mapping site.
<div style="width:138px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_9201305251918089" src="http://www.image-maps.com/uploaded_files/9201305251918089_1_pizzaa.png" usemap="#Image-Maps_9201305251918089" border="0" width="138" height="71" alt="" />
<map id="_Image-Maps_9201305251918089" name="Image-Maps_9201305251918089">
<area shape="poly" coords="3,3,56,5,19,41,9,26," href="http://www.image-maps.com/home" alt="home" title="home" />
<area shape="poly" coords="64,11,26,49,41,57,61,62," href="http://www.image-maps.com/links" alt="links" title="links" />
<area shape="poly" coords="71,10,74,64,92,57,106,49," href="http://www.image-maps.com/about" alt="about" title="about" />
<area shape="poly" coords="117,40,129,22,133,4,80,5," href="http://www.image-maps.com/botm" alt="botm" title="botm" />
</map>
</div>
http://jsfiddle.net/suv8R/
However, this is what I want to achieve.
<style type="text/css">
#container {
position:fixed;
width:138px;
height:71px;
margin:10px;
background-color:yellow
}
#slice1 {
height:20px;
width:20px;
position:absolute;
margin-top: 0px;
margin-left:0px;
}
#slice1 img:hover {
margin-top: 3px;
margin-left:-8px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice2 {
position:absolute;
margin-top: 4px;
margin-left:21px;
}
#slice2 img:hover {
margin-top: 8px;
margin-left:-3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice3 {
position:absolute;
margin-top: 1px;
margin-left:69px;
}
#slice3 img:hover {
margin-top: 8px;
margin-left:3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice4 {
position:absolute;
margin-top: 2px;
margin-left:72px;
}
#slice4 img:hover {
margin-top: 3px;
margin-left:8px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice1 img, #slice2 img, #slice3 img, #slice4 img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
<body>
<div id="container">
<div id="slice1"><img src="http://static.tumblr.com/8xsfla2/NWbmnda37/slice1.png"></div>
<div id="slice2"><img src="http://static.tumblr.com/8xsfla2/Nmjmnda5b/slice2.png"></div>
<div id="slice3"><img src="http://static.tumblr.com/8xsfla2/jAImnda5o/slice3.png"></div>
<div id="slice4"><img src="http://static.tumblr.com/8xsfla2/KR0mnda62/slice4.png"></div>
</div>
</body>
http://jsfiddle.net/YPsdj/1/
As you can see, each slice is a link, and I want each slice to slide out when I hover over it. The problem with the second example is that each slice is a transparent png, so the transparent parts of each png image overlap the other ones, so hovering on the entire slice doesn't work (especially the first and third slices).
So, if anybody has any solutions on how to make links like this work effectively, you help would be much appreciated.
Thank you!
Related
When you hover over the image, both the image and the part where the text is is clickable. Also the part of the text highlights red, thats great. When you hover over the text, also the text background area changes to red and the text part and the image part is clickable. What I want is that when you hover over the image that the WHOLE part of the text-area and the white area under the text-area is hoverable/clickable (so that white part right next to the image, the rectangular block that has the full height of the image and the full width of the text-area). Is that possible to make the whole rectangular block hoverable/clickable (and not just that text-area block)?
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover div {
color:#FFF;
text-decoration:none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.article-image img {
width: 40%;
height: auto;
margin-right: 10px;
margin-top: 0px;
float:left;
}
<div class="well sb">
<div>
<a href="#">
<div class="article-image">
<img alt="#" src="http://lorempixel.com/100/100">
<div class="tag">
TAG
</div>
<div class="title">
TITLE
</div>
</div></a>
</div>
</div>
Something like this?
A solution using flexbox
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover div {
color: #FFF;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb a {
display: flex;
}
.well.sb .article-image {
width: 40%;
margin-right: 10px;
}
.well.sb .article-image img {
width: 100%;
height: auto;
}
<div class="well sb">
<a href="#">
<div class="article-image">
<img alt="#" src="http://lorempixel.com/100/100">
</div>
<div class="txt">
<div class="tag">
TAG
</div>
<div class="title">
TITLE
</div>
</div>
</a>
</div>
The float:left needs to be followed by a clear:both for its parent to compute the height of the floated contents. Add the following css
.article-image:after{
content: '';
clear: both;
display:block;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover div {
color:#FFF;
text-decoration:none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.article-image img {
width: 40%;
height: auto;
margin-right: 10px;
margin-top: 0px;
float:left;
}
.article-image:after{
content: '';
clear: both;
display:block;
}
<div class="well sb">
<div>
<a href="#">
<div class="article-image">
<img alt="#" src="http://lorempixel.com/100/100">
<div class="tag">
TAG
</div>
<div class="title">
TITLE
</div>
</div></a>
</div>
</div>
I have an image with an embedded title h1. The whole image is clickable a href. When the user hovers over h1 then the background-color of h1 title changes. I would like that the background-color of h1 title changes also when user hovers over the image, so not directly on the h1 title. Possible?
.sh1 h1:hover {
background-color: #000;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sh1 {
background-image: url(https://placeimg.com/140/180/any);
margin:30px;
text-align:center;
float:left;
}
.bt {
background-image: url(https://placeimg.com/140/380/any);
margin:30px;
text-align:center;
float:left;
}
.mt {
background-image: url(https://placeimg.com/240/580/any);
margin:30px;
text-align:center;
float:left;
}
.mt h1:hover {
background-color: red;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.bt h1:hover {
background-color: blue;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<h1>BIG TITLE</h1>
<h1>MEDIUM TITLE</h1>
<h1>SMALL H1</h1>
Change your css selectors like this:
.sh1 h1:hover => .sh1:hover h1
.mt h1:hover => .mt:hover h1 ...
.sh1:hover h1 {
background-color: #000;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sh1 {
background-image: url(https://placeimg.com/140/180/any);
margin:30px;
text-align:center;
float:left;
}
.bt {
background-image: url(https://placeimg.com/140/380/any);
margin:30px;
text-align:center;
float:left;
}
.mt {
background-image: url(https://placeimg.com/240/580/any);
margin:30px;
text-align:center;
float:left;
}
.mt:hover h1 {
background-color: red;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.bt:hover h1 {
background-color: blue;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<h1>BIG TITLE</h1>
<h1>MEDIUM TITLE</h1>
<h1>SMALL H1</h1>
OK. So I have 6 images in a table, 3 per row and I have 2 rows. I wanted to apply the "grow" effect to all six of my images. So I did but everything started moving every thing else in a dyslectic kind of way. Any ideas how I might do that?
CSS:
.raste img {
height: 190px;
width: 300px;
-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;
}
.raste img:hover {
width: 315px;
height: 205px;
}
HTML:
<td>
<li>
<a href="project1.html">
<div class="raste">
<img src="log.jpg" alt="" width="300" />
</div>
</a>
</li>
</td>
Thank you for all your answers in advance.
you may use transform instead:
.raste img {
height: 190px;
width: 300px;
-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;
}
.raste img:hover {
-webkit-transform:scale(1.079);
transform:scale(1.079); /*average value, set it to your needs */
}
I have right side fix position div. I want to display it on hover with animation.
What I want to do that if user hover on the whole div the both span should come out with slide animation. BUT right now the scroll is coming and only one span the text(need help) coming out not ? mark coming out.
.need-help-qu{
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
right:0;
top:40%;
font-weight: bold;
font-size: 20px;
position:absolute;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help{
background-color:#06507D;
color:#ffffff;
right:-150px;
top:40%;
position:absolute;
padding:5px 10px;
display: inline-block;
overflow: hidden;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover .need-help {
right:0;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Check this out.
You were trying to move individual divs so it was proving tricky, just bunch the whole content of .need-help-full div together and move it as a whole.
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
<style>
.need-help-qu{
background-color:#042E49; color:#ffffff; padding:3px 10px 2px;
font-weight: bold;font-size: 20px;float:left;
}
.need-help{
float:left; background-color:#06507D; color:#ffffff;
padding:5px 10px;overflow: hidden;
}
.need-help-full{
right:-123px; position:fixed; transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;-moz-transition: all .8s ease;
-ms-transition: all .8s ease;-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover{right:0;}
</style>
Also I see that you are trying to accomplish this slide in box so mostly it is done using position:fixed; and not using absolute. Since it is generally "fixed" to the page and not to some container element.
You can do following way. Make parent component overflow:hidden. and move need-help-full left/right on hover and give absolute position to need-help-full div.
.need-help-qu {
background-color: #042e49;
color: #ffffff;
display: inline-block;
font-size: 20px;
font-weight: bold;
padding: 3px 10px;
vertical-align: top;
}
.need-help {
background-color: #06507d;
color: #ffffff;
display: inline-block;
overflow: hidden;
padding: 5px 10px;
right: -150px;
}
.need-help-full {
height: 50px;
overflow: hidden;
padding: 5px 10px;
position: absolute;
right: -135px;
top: 40%;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover {
right:0;
}
body {
overflow: hidden;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Hope it helps.
$(".need-help-qu").hover(function(){
$(".need-help-qu").animate({right: '12px'});
});
body{
overflow-x:hidden;
}
.need-help-qu{
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
right:0;
top:40%;
font-weight: bold;
font-size: 20px;
position:absolute;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help{
background-color:#06507D;
color:#ffffff;
right:-150px;
top:40%;
position:absolute;
padding:5px 10px;
display: inline-block;
overflow: hidden;
transition: all 0.4s ease-in-out;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.need-help-full:hover .need-help {
right:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Opacity is not working when position is absolute
a.Button5{
display:block;
opacity:0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
a.Button5:hover{
opacity:1;
}
<a href="(imageFile)" class="button5" rel="lightbox[imgBox]">
<div class="ch-item cha_01">
<div class="ch-info" style="top:0px; left:30px;">
<h3>(Text)</h3>
</div>
</div>
</a>
.cha_12{
position:relative;
float:left;
width:225px;
height:160px;
top:0px;
left:0px;
background-image:url(images/cha_ra_04.png); }
this works very well.
but
.cha_12{position:absolute;
float:left;
width:136px;
height:378px;
top:316px;
left:814px;
background-image:url(images/cha_ra_12.png);}
this doesn't work in IE10.(Firefox, chrome is working very well)
I don't know what i do wrong. please help me
be more specific
a .ch-item {
opacity:0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
a:hover .ch-item {
opacity:1;
}