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; }
Related
Hello guys I'm doing a CSS/HTML course at the moment and I have to assign a border to images on my website.
1. I gave the images a class:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images>
<img src="elefant.jpg" alt="Elefant">
In my CSS file I used following code to assign the border:
.images
{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
Should be very easy code but the in Chrome it doesnt really seem to work correctly. Here a screenshot :
https://snipboard.io/VAipY8.jpg
This is probably a very beginner thing but I hope someone can help me :)
If you are trying to make the image a clickable link you should wrap it in between the <a> tag
<img src = " ">
And to add border to the image you should give class to the <img> tag not to the <a> tag.
Currently you are applying border to the link inside the <a> tag.
You're missing the closing / tag in the img tag. and the closing " in the class attribute. and the closing tag for the anchor tag. Write your code like this:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images" >
<img src="elefant.jpg" alt="Elefant" class="elephantImg" />
</a>
Change the css as follows:
img {
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
You can use this if you decide not to use the class attribute on the elephant image otherwise, if you decide to use the elephantImg class attribute use this css:
.elephantImg{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
<!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;
}
I want to add a <div> container in place of a check box. But the <div> container takes up the entire line. I tried all sorts of "floats" but none worked.
here is my css code:
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
}
With The inline div will not occupy the line
use this
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
display:inline;
}
Style it with this: .inline {display: inline}
Use inline tag i.e.
inline { display : inline}
Inline is doing the trick, but you are really just avoiding the problem. You could have just set a width on the div and the label or whatever and floated them. By default block-level elements are 100% width. At some point, you are going to want to have some of the options that being display block allows - and inline doesn't. And you will probably also want to have some of the options that inline elements have, like vertical alignment. I suggest trying inline-block - I've been getting tons of use out of it. Give hit a spin: fiddle
HTML
<input type="checkbox" name="check-box-01" />
<div class="check-box-replacement"></div>
<label class="check-box-label" for="check-box-01">
Label for this checkbox
</label>
CSS
input[type="checkbox"] {
display: none;
}
.check-box-replacement {
width: 2em;
height: 10em; /* just to prove a point */
background-color: red;
}
.check-box-replacement, .check-box-label {
display: inline-block;
vertical-align: middle;
}
I want to CSS a table, but I can't render the line between "tr":
Add this CSS:
td {
border:1px solid #000;
}
Simply add attribute rules="all" to your <table>.
Putting the CSS on the tr element doesn't always work out too well.
You could try something like this if you're going for just row borders:
td {
border-bottom:1px solid #000;
}
just try this
table {
border-left:1px solid #000;
border-bottom:1px solid #000;
}
td {
border-top:1px solid #000;
border-right:1px solid #000;
width:50px;
padding:0 0 0 10px;
}
working demo
I am creating a html maze using tables and for some reason, the borders dont show up correctly. Instead of nice straight lines, the borders show up as diagonal blobs instead. Is there a way to fix this? Here is my example : http://thomaswd.com/maze.
Output:
My CSS:
section .l {
border-left:20px solid #ff9c00;
}
section .r {
border-right:20px solid #ff9c00;
}
section .t {
border-top:20px solid #ff9c00;
}
section .b {
border-bottom:20px solid #ff9c00;
}
section table {
margin-right:auto;
margin-left:auto;
border:20px solid #FF9C00;
}
Remove border: 20px solid transparent; from your section table tr td selector (not shown in your code sample) and it looks fine.