I feel a bit silly asking this because it's so basic, however I appear to be stuck.
Using CSS I want to apply a style to all the IMG elements on the page where no other class has been applied.
So, for example let's say I want all my images on my page to have have a red border, unless a class is applied which says different. This is basic stuff, right? But I'm finding that my other classes are overridden by the base IMG class.
In the following simple example I would like a red border on the top image and a green border on all the others:
CSS:
<style>
IMG {
/* I want this to apply to all images except those where other style applied */
border: solid 12px red;
width:50%;
}
IMG:nicepic {
border:solid 12px green;
}
</style>
EDIT: Problem was a typo and nothing more. IMG:nicepic should have read IMG.nicepic ("." instead of ":"). This entire question is based on a simple typo in my CSS; I tried to delete the question but was denied permission to do that by stackoverflow.
The class selector in css is a dot (.):
img.nicepic { /*not img:nicepic*/
border:solid 12px green;
}
hey there is small change
CSS CODE
IMG {
/* I want this to apply to all images except those where other style applied */
border: solid 12px red;
width:50%;
}
IMG.nicepic {/*not (:) is (.)*/
border:solid 12px green;
}
See Demo http://jsfiddle.net/JentiDabhi/ygco1ahf/
Why dont you just create a separate class for the first image, so you won't have to use the general "img"?
Related
I am making an html page in which I have put some pictures. Now I want to put some fancy borders around it. How do I do that? My code is:
<img src="award.gif">
When I run it, it comes out perfectly. But I need a border. I use the latest version of Google Chrome. Thanks.
You can use CSS rules to set border around the image, see the below link where you can see different CSS borders and you can generate cross-browser border CSS. I like this tool very much and this tool provides an intuitive preview to see how the border will look like-
http://www.cssmatic.com/border-radius
Like this,
css:
img {
border:1px solid #021a40;
}
The "Double Border":
img {
padding:1px;
border:1px solid #021a40;
}
For multiple images, you can class in each images, and css is here,
Simple Example
Another one Example
And for more about border and border-radius refer this Link
UPDATE:
FIDDLE
You can do this by using a instead because in matters of CSS this can be more versatile.
CSS
myImage {
background:url(path to image file goes here);
border: 1px solid #000000; //black border
//some width and height values
}
HTML
<div class="myImage"></div>
HTML
<div class="divimg">
<img src="award.gif">
</div>
CSS
.divimg {
border: 1px solid red; }
There are many ways of doing that, you can create a div and put the image inside the div and then, with css, create the border.
Another simple way is this:
img {
border-style:solid;
border-width:1px;
border-color:red;
}
I have the following CSS problem: a website first import a CSS style file named bootstrap.css (The BootStrap framework CSS settings), then it is imported another CSS file named my-custom-style.css that override some of the bootstrap.css settings (so I can create some custom settings leaving unchanged the bootstrap.css file)
Now I have the following situation, in the bootstrap.css file I have this property that I want to override:
.img-thumbnail {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.42857;
max-width: 100%;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
Now I have to override it in my my-custom-style.css file in such a way that the .img-thumbnail object have no border. So I delcare a
.img-thumbnail {
}
and I want to say to CSS that the following field (setted in the **bootstrap.css) must not exist in the overrided file (so I have not the border)
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
height: auto;
Can I do something like this or have I to override it with a specific value?
I tryied to override it with a specific value but I can override the background-color with a new color value (and it work) but when I try to change the border value to 0px it still use the bootstrap.css definition
Can you help me to solve this problem? I think that exist an elegant way to simply say: "don't use the overrided file settings without explicitly override it with new values
Tnx
Andrea
Basically, the CSS engine will decide which rule to use based in 3 things (listed here in order of importance):
!important clauses
More specific rule
Rule order
Now, check out this fiddle.
First, let's talk about the order. We have:
div { background:green; }
and
div { background:gray; }
So, which background CSS will use? green or gray? They are both rules with no !important clauses, and have the same specification level (both are applied for div) only remaining the order to decide. In this case gray comes last so it will be applied to all div elements.
Now, the "specificness" of the rule.
#div1 { background: red; }
This one is a much more specific rule than the other rules that apply only to div elements. So #div1 will have a red background even with a div{ background: gray; } coming later.
And last, but not least !important.
These rules are... important. They can only be overridden by another !important rule that comes later and have the same specific level.
Even if a !important rules is declared in a lower level of specification, it won't be overridden. Like in:
div { width:50px !important; }
#div2 { border:3px solid blue; width: 100px; }
Even coming later and being more specific, width: 100px; will not be applied to #div2.
Now that you know all of this, it's a matter of inspecting the element to see what's going on and then guess "how much power" you'll need to override that rule.
yeah, just override that class in your own css file and add !important at the end
I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of "post". The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which "post" to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.
This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?
You could use css nth-of-type() selector - since you are floating left and have the div's two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)
section.home-grid {
width:440px;
}
.post {
border-top:1px solid #777;
width: 200px;
float:left;
padding: 10px;
}
.post p {
padding:.5em 1em;
width:90%;
margin:0 auto;
text-align:justify;
}
.post:nth-of-type(2n) p {
border-left:2px dotted #777;
}
Not entirely sure what you're looking for, but perhaps using an nth-child css selector on the posts will help.
http://css-tricks.com/how-nth-child-works/
Please excuse if this is a fairly basic question. I've trawled through Google and elsewhere, and haven't found a solution that works for me.
I am generating an image gallery with the following markup.
<div class="gallery">
<a class="galleryimg">
<img>
</a>
....
</div>
The .galleryimg is repeated, based on the number of images in the gallery. It is alse floated left.
I want to create a :hover effect that outlines the selected image. I've tried using border (messes up the layout), outline (which sounds perfect in principle), and inset box shadow (which is rendered below the image).
Outline is very close to what I want to achieve. But the right and bottom outline is obscured by adjacent images floating above it.
So my question: how can I create an on hover border/outline effect on a gallery of linked images?
I'd really appreciate any ideas as to how others have tackled this. Thanks!!
EDIT
The images are abutting, with no white space between.
HI you can used simply used css Tricks as like this
css
#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a img{width:100px;height:50px;}
#example-one a:hover img { margin: -3px;}
Live demo http://jsfiddle.net/rohitazad/QkT7d/3/
more about this click here http://css-tricks.com/examples/InnerBorderImages/#
Check this out:
http://jsfiddle.net/hMNZE/
Might be the desired effect. You will experience slight changes to the image as it makes itself smaller to allow for the border. but do let me know. This is only a quick fix.
---EDIT---
http://jsfiddle.net/hMNZE/2/
is a second version using negative margin, this looks okay but the images overlap a little.
Check out link: http://css-tricks.com/examples/InnerBorderImages/
---EDIT2---
http://jsfiddle.net/hMNZE/3/ is the best
---EDIT3---
.gallery {
width:100%;
height:100%;
padding:10px;
}
.galleryimg {
float:left
}
.galleryimg img {
z-index:-10;
}
.galleryimg img:hover {
margin:-2px;
border:2px solid blue;
z-index:9999;
}
if you use box-sizing property (supported since IE8) you could add the border on :hover without messing up the layout
.galleryimg {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width : 100px;
float : left;
}
.galleryimg:hover {
border : 3px gray solid;
}
see http://paulirish.com/2012/box-sizing-border-box-ftw/ for more info on this property
http://jsfiddle.net/Vvr7C/
The trick is to add the padding on .gallery so you'll see the outline also on the images that are on the edge od the gallery:
.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}
If you are using box-shadow & it's come below the other image then write like this:
.gallery img:hover{
padding:0;
box-shaow:0 0 0 2px red;
z-index:1;
}
.gallery img{position:relative;}
If your question was answered above, great. If not, it sounds like you might need some margin between the images and other objects around. You said it was obscured. It might just need 2px or so worth of margin to unobscure it.
hi you can do this thing easily via CSS3 *box-shadow* property:-
box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9);
see the demo for better understanding :- http://jsbin.com/upedel/5/edit
UPDATED ANWSER
Please see the updated demo:- http://jsbin.com/upedel/10/edit
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.