<!doctype html>
<html>
<head>
<style type="text/css">
#rightbar a:hover img
{
border:1px solid #5cadff;
text-decoration:none;
}
#rightbar img
{
padding:20px 58px;
}
</style>
</head>
<body>
<div id="rightbar">
<h3>MultiMedia</h3><br/>
<img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"> <br/>
<img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"> <br/>
<img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"> <br/>
<img src="exercises-for-fitness-in-pregnancy.jpg" alt="youtube video"> <br/>
</div>
I do not want the images to dangle when i hover over it?
How to get rid of it and i want images to be still when i hovero over.
It could be caused of the border. Try this:
<style type="text/css">
#rightbar img:hover
{
border:1px solid #5cadff;
text-decoration:none;
}
#rightbar img
{
border:1px solid transparent;
padding:20px 58px;
}
</style>
Probably your visual dangle is caused by the border added on hover which adds 1px around the image. you can solve that by adding border:1px solid transparent to the #rightbar img
This will solve you issue
you are adding the border at the time of hover, so flickering happens. try replace with this..
#rightbar img
{
padding:20px 58px;
border:1px solid transparent;
}
and here is the FIDDLE.
When you set a 1 px border, it shifts 1px to right to make space for the border. So you can decrease margin-left by 1px in hover action.
#rightbar a:hover img{
border:1px solid #5cadff;
text-decoration:none;
margin-left: -1px;
}
Related
So I am trying to make a dog shelter website, and I was wondering if there was a way to make both the image and the text act as one, without turning it into a table. For example, when I hover over the image the text will change still colour, as if I were hovering over the text. I am very new to HTML so it may be something very simple. Thanks.
<html>
<body>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {font-size:20px; font-color:black; font-family:montserrat; text-decoration:none; position:absolute; margin-top: 360px; text-align:left; border-width:1px; border-style:solid; border-color:lightgray; padding: 27.5px; border-radius:0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
</style>
<img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" height="300" width="200">
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveLana.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a>
</html>
</body>
This is the code
Use general sibling selector (~) selects all elements that are next siblings of a specified element.
in your case it should be :
a:hover ~ .name { color: #327da8; }
You can put your image and text into the same div, and give it a class name.
Then apply your CSS on that class as well as class:hover.
Example:
.image_and_text_div{
color: black;
// rest of your css property
}
.image_and_text_div:hover{
color: red // it will change only text color if you hover over the image or the text
// Or you can even directly apply CSS on the text like below
h4{
color; red//
}
}
<div class="image_and_text_div"><img hre="your image url/src" /> <h4>Puppy</h4> </div>"
I have a HTML in this fashion
<div class="image_area">
<a href="<?php echo base_url();?>product-detail?product=<?php echo $pl['product_slug'];?>">
<img src="<?php echo base_url().$pl['product_image'];?>"
style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
</a>
</div>
I want a hover effect on the image such that the border gets highlighted.
I have used this CSS code, but nothing happens
.image_area img :hover{ border: 1px solid #b6e2ff}
.image_area img:hover{ border: 1px solid #b6e2ff}
No space after img
And to avoid jump of image when hovered, do :
.image_area img{ border:1px solid transparent}
or you can even better do
.image_area a:hover img{ border: 1px solid #b6e2ff}
EDIT thanks to nevermind
I didn't see this:
style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
remove border:1px solid #cfcfcf from there, and put it in
.image_area img{ border:1px solid transparent}
or .image_area a img{ border:1px solid transparent}
No space between img and :hover
You can use
.image_area > a img:hover{border:1px solid #b6e2ff;}
two notes:
1. do not use style in your html code, add a new class with the following css:
width:196px;
min-height:250px;
max-height:250px;
border:1px solid #cfcfcf;
you missed the ";" tag in the end of your line. try use this code:
.image_area img:hover { border: 1px solid #b6e2ff; }
This question already has answers here:
how to remove border of a hyper-link image?
(5 answers)
Closed 8 years ago.
When I use <a> element the tooltip works fine . Here is the code :
<html>
<head>
<style>
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
a {
color: blue;
}
</style>
</head>
<body>
<br><br>
<a href='#' class='tooltip'>
<img src='http://www.hasitleaked.portmerch.com/stores/hasitleaked_provider/images/search_button.gif'></img>
<span>
Quick description
</span>
</a>
</body>
</html>
The problem is because of the <a element, The IE8 shows blue boarder of that image. This boarder does not exist, I don't know why, but other browsers work fine. I want to get rig of the image blue border. How can I do this ? I tried not to use <a but it did't work
You must try
img, a {border:none, outline: none;}
I'm trying to get rid of many divs on my page so I wonder if this "tile" could be done without using one.
Something like this:
<a href="mks.html" class="big-tile big-tile-1">
<h1>town<br>
library</h1>
</a>
The anchor tag would have a background: url(big-tile-1) top no-repeat; I guess. Big-tile would have static width and height. But how do I style the h1? Can You help me please?
You could do something like this: JSFiddle Demo
CSS
.big-tile {
border:10px solid #ccc;
display:inline-block;
position:relative;
height:200px;
width:200px;
color:#fff;
background:url("http://lorempixel.com/400/200/nature/");
}
.big-tile h1 {
margin:0;
background:teal;
position:absolute;
padding:20px;
bottom:0;
left:0;
right:0;
}
Or if you want the image in the markup and not as a background image - you could do this : http://jsfiddle.net/UFUq5/3/
Demo Fiddle
HTML
<a href="#">
town<br />
library
</a>
CSS
a {
display:inline-block;
height:450px;
width:300px;
background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
background-color:teal;
background-size:300px 300px;
background-repeat:no-repeat;
padding-top:350px;
padding-left:50px;
box-sizing:border-box;
color:white;
text-decoration:none;
font-family:arial;
font-size:20px;
border:10px solid #c0c0c0;
}
technically, you wouldn't need to use the big-tile-1 class. but you could do something like this: http://jsfiddle.net/RU23A/1/
with a couple changes:
1. add an image to the background url
2. change the font to whatever that font is.
You can do this:
<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> town <br> library </h1>
</a>
then your css:
#image-overlay{
width: 300px;
height: 500px;
position: relative;
border: 10px #999 solid;
border-radius: 1px;
}
#image-overlay h1{
position: absolute;
bottom: 0;
left: 0;
background-color: green ////whatever your choice
color: white;
padding: 10px;
font-family: //your choice
font-size: 20px;
}
I have used the following image as background image for link.
If I hover over the image the link display in the edges also. I just want to show the link for exact round image and not for the blank edges. Is there any possibility to do this in css?
css:
.buy_purple a{ background-image:url(../imagesf/buy_purple.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}
Html:
<div class="buy_purple">BUY</div>
Hey are you looking like this :-
http://tinkerbin.com/yY4FzaZr
HTML
<div class="buy_purple">BUY</div>
CSS
.buy_purple a{ background-image:url(http://i.stack.imgur.com/wC3xc.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}
.buy_purple a:hover {
background:url(http://i.stack.imgur.com/C4Jia.jpg) no-repeat 1px -5px;
}
or your are looking in pure css
you can do this using pure css
Here the html
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Small-city-symbol.svg">
</div>
Here the css
img {
border: 1px solid red;
border-radius: 169px 169px 169px 169px;
width: 200px;
height: 200px;
}
a {
height: 0px;
}
Here the demo : Fiddle
I think you should use map tag
<img src="test.png" alt="test" usemap="links"/>
<map name="links">
<area shape="circle" coords="your image co-ords(centerX,centerY,Radius)" href="your link" />
</map>
If you get your image to be square and perfectly centered, you can just use the border-radius property, which will affect the effective clickable area as well.
a{
...
display: block;
border-radius: 40px; /* if the height+width are 80px */
}
Example: http://jsfiddle.net/tvJMG/