Is there any way I can Name the clickable areas of an image? On mouse hover the name has to be highlighted.
http://www.fifa.com/worldcup/destination/index.html
If you visit the above mentioned link the names of the destinations gets highlighted.
How it is done in the link you provided is they set an image as the background of the div then used absolute positioning to place the click-able areas:
HTML
<div>
<span>Pepperoni!</span>
<span>Cheese!</span>
<span>Tomato!</span>
</div>
CSS
div{
background: url(http://www.lorempizza.com/200/200);
background-size:cover;
width:500px;
height:500px;
position:relative;
}
span{
display:block;
background:white;
border-radius:5px;
width:100px;
text-align:center;
padding:10px;
}
span:hover{
background:lightblue;
font-size:20pt;
}
span:nth-child(1){
position:absolute;
top:100px;
left:300px;
}
span:nth-child(2){
position:absolute;
top:300px;
left:100px;
}span:nth-child(3){
position:absolute;
top:400px;
left:300px;
}
JSFiddle Example
Related
I'm trying to create a button with inverted half circles on the sides.
I've tried creating a half-circle and placing it at the end of the button but the outcome doesn't look pleasant.
The outcome should look something like this:
button with half circle at both end
You can just use CSS after and before Pseudo-Elements or else you can also use the CSS shadow property to achieve this kind of design. The below code shows with CSS after and before Pseudo-Elements.
https://codepen.io/Lijo_Chacko/pen/abLjEaw
HTML
<button class="circled-button">
Button
</button>
CSS
.circled-button
{
background:#000;
box-shadow:0px 0px 0px;
border:0px;
padding:20px 15px;
min-width:250px;
position:relative;
overflow:hidden;
color:#fff;
font-size:20px;
border-radius: 9px;
}
.circled-button:after
{
content:'';
display:block;
width:20px;
height:20px;
border-radius:50px;
position:absolute;
left:-9px;
background:#fff;
top:50%;
transform:translateY(-50%);
}
.circled-button:before
{
content:'';
display:block;
width:20px;
height:20px;
border-radius:50px;
position:absolute;
right:-9px;
background:#fff;
top:50%;
transform:translateY(-50%);
}
So I'm not going to apply code because it's just a super quick question that I hope doesn't have a complex answer. What I want to do is have one picture where when I put my mouse on top of it then a bigger version of that picture will appear to the right of the original small picture.
If anyone knows what elements I need to use for this that would help me get on the right track.
Thanks!
This is the relevant css
#picture {width:100px; height: 250px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px; height:100px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px; height:200px; }
And this is the relevant html
<div id="picture">
<a class="small" href="#nogo" title="small image"><img src="images/jupiter-s.jpg" title="small image" />
<img class="large" src="images/jupiter-l.jpg" title="large image" /></a>
</div>
Let's look at the css and html that make the magnification happen.
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
You are telling any links within the picture div, with the .large class specified, that they are to display as nothing! Take a look at the code. 0 width, 0 height, 0 border!! Any links with the .large class specified won't be seen UNLESS it’s hovered over AND has the .small and .large classes specified because you have a separate rule for "hover .small .large" which is:
#picture a.small :hover .large {display:block; position:absolute; top:-65px; left:150px; width:200px; height:200px;}
This tells the element that instead of being 0 x 0 in size it's to be 200 x 200 and voila! You can see the picture! Clever isn’t it!
Magnify an image
As you will see from the html code above your anchor’s class is .small and your image class is .large. So if your link is hovered over then
#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px;
Data shared from: http://www.dreamweaverclub.com/dreamweaver-show-larger-image.php
You can use the adjacent selector +, which applies css to the element directly after.
.small-img:hover + .big-img{
display:block
}
.big-img{
display:none
}
The html would be:
<img class="small-img">
<img class="big-img">
I have the following HTML:
<div class="flag_container">
<div class="flag_1">
<img class="flag_img_1" src="../images/gb.png"></img>
<div class="speaker_1">
</div>
</div>
<div class="flag_2">
<img class="flag_img_2" src="../images/at.png"></img>
<div class="speaker_2">
</div>
</div>
<div class="flag_3">
<img class="flag_img_3" src="../images/de.png"></img>
<div class="speaker_3">
</div>
</div>
<div class="flag_4">
<img class="flag_img_4" src="../images/nl.png"></img>
<div class="speaker_4">
</div>
</div>
</div>
and CSS:
.flag_img_1{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_1:hover+.speaker_1{
display:block;
}
.speaker_1{
width:100px;
height:100px;
background-color:red;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_2{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_2:hover+.speaker_2{
display:block;
}
.speaker_2{
width:100px;
height:100px;
background-color:green;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_3{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_3:hover+.speaker_3{
display:block;
}
.speaker_3{
width:100px;
height:100px;
background-color:blue;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_4{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_4:hover+.speaker_4{
display:block;
}
.speaker_4{
width:100px;
height:100px;
background-color:orange;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_container{
padding:80px 0;
}
.flag_1{
padding-left:406px;
}
.flag_2{
float:left;
padding-left:163px;
padding-top:40px;
}
.flag_3{
float:right;
padding-right:163px;
padding-top:40px;
}
.flag_4{
padding-top:160px;
padding-left:406px;
}
Which creates the following display:
and on hover:
Where the blue square is a placeholder for an image.
This all works fine.
I want to make the display responsive, so when the screen gets smaller, the flags take a central formation like:
My problem is, it will not stay central, but will keep a fixed position in relation to the left. Here is my CSS:
.flag_container{
width:80%;
margin:auto;
}
.flag_1{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_2{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_3{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_4{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.agendaHeading{
float:left;
font-size:120%;
}
.flag_img_1:hover+.speaker_1{
display:none;
}
.flag_img_2:hover+.speaker_2{
display:none;
}
.flag_img_3:hover+.speaker_3{
display:none;
}
.flag_img_4:hover+.speaker_4{
display:none;
}
I have tried every combination I can think of, and read many posts but it does not work. I suspect it is something to do with the structure of my divs preventing it from working as I want?
An example of CSS where I have managed to centre a div in the way I am trying to here is:
.box1{
width:85%;
margin:auto;
border:1px solid #ffffff;
float:none;
height:50px;
}
But this does not work.
Apologies for the long post/amount of code, but to demonstrate my problem I have to include it all.
I think the problem is that you are using pixels and no % in your paddings.
Did you tried to use % instead of fixed pixels in your padding-left,top and right on you css of .flag_*? I've bee playing a little bit with your code and using % gives you a more efficient way of organize the divs on a resized screen.
In my last question I asked how could I add text onto the gray area of the picture, some guys suggested using <span>, I ended up with all the text (because it is a span after all, inline) on top of each other in a single line (left picture), even though it was set to display:block. How can I break it into seperate lines as seen in the picture on the right?
and does it make sense using h4/h5 for the styling or I should use different div's or something?
HTML:
<div class="rightCol1">
<img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas šukutis</h5></span>
<img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}
It's because your span has no line height, so each on the lines will come out ontop of each other. I suggest removing line-height from your span CSS:
.rightCol1 a span {
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80px;
left:0;
z-index:1;
}
This is my code :
HTML :
<div class="container">
<div class="myBox">My Text</div>
<a class="myLink" href="http://www.google.com"> </a>
</div>
CSS :
.container
{
position:relative;
width:200px;
height:200px;
}
.myBox
{
position:absolute;
top:0;
left:0;
z-index:90;
background-color:#ff0000;
width:200px;
height:200px;
}
.myLink
{
text-decoration:none;
display:block;
position:absolute;
width:50px;
height:50px;
top:0px;
left:0px;
z-index:100;
}
on IE7, the link over "My text" doesnt work as link. If, on myLink I put a background-color, it works as well.
Am I on drugs or it is a normal behaviour? And how can I fix this with a transparent background?
Try to add these lines to .myLink:
background-color:#ff0000;
filter: alpha(opacity=0);
EDIT
If there will be only an image in .myBox, .myLink will work as expected, if the image is added as a background image to .myBox.