I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/
Related
I'm looking for a way to place text under my images and want to keep it there when changing browser size (if possible make text bigger and smaller when doing so, but not necessary). When I use a div around an image the other images seem to disappear.
This is the link to the site:
http://www.noortjepalmers.be/portraits.html
Thanx.
You can add a div around each image, give it a class like "image-container" and then in your css you set
.image-container {
display: inline-block;
}
I'm setting up a portfolio webpage, and I want the images to be coloured with a colour from the logo 50% solid until mouseover, which makes the colour fade out and reveal the image properly.
Here's the site so far; www.cmvisual.com
Anybody know how to do this?
It seems like you probably want to put a div with a background color and partial opacity
over the image, and then use a CSS transition (preferably) or Javascript to animate the transition.
Maybe start at half opacity, then go to 0 opacity on rollover.
What you REALLY want is CSS blend modes, but that isn't fully supported yet.
I have an MVC 4 View where I am displaying a table of data. This table is rendered inside a <div> tag. What I would like to do is to display a background image that the div contents sit on top of. The image should comprise most, or all, of the div and be somewhat faint and subtle. In other words, it shouldn't stand out. It should almost look like a watermark. I don't have a lot of experience with MVC and HTML/CSS and am not sure how to do this.
I'm not sure what sort of image I should use (PNG, JPG?), or if it even matters and how to make it transparent enough to make it look subtle etc. I'm assuming CSS can handle much of this for me, just not sure where to start.
Oh it's easy. Give the div a class, eg:
<div class="table-wrapper">
At the end of the css file being used on your page, if their is one, write css like this:
.table-wrapper{
background-image: url(/path/to/image);
/* if the image repeats nicely, tile it, using background-repeat */
background-repeat: repeat; /* repeat-x, repeat-y and no-repeat are options */
/* alternatively, you could stretch it to fit the div, using background-size */
background-size: 100% 100%;
}
You shouldn't see much difference in size between a png or a jpg, as long as you don't use transparency. .pngs with transparency can get make a file big very quickly.
I suggest picking an image that matches the colour of the surrounding area quite closely. This way you can give the impression of a low-contrast or translucent image, without the file-size cost.
I'm trying to get two images to repeat ( one shadow image on the right, the other on the left) in the background exactly like this site.
So far I am unable to get the CSS code correct:
http://www.elegantthemes.com/preview/Modest/
I examined the code for that site and have the shadow images I wish to use. I tried to duplicate the code that Elegant Themes is using on a WordPress site running Headway:
.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; }
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; }
But it did not work.
Then I tried:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;}
This worked for the right shadow image - it appears correctly
Then I tried
body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
This worked for the left shadow image - it appears correctly
Now when I tried and combine the code to display both shadow images along Y left and Y right as such:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
It does not work - both images do NOT appear
I also tried this:
body {
background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png);
background-repeat: repeat-y right top, repeat-y left top;
}
This also does not work - both images do NOT appear
How can I get this to work exactly as it does with the Modest Theme by Elegant themes?
Thanks for reading.
I think you can use Multiple Backgrounds for your solution.
The background property has been overhauled to allow for multiple backgrounds in CSS3.
CSS
body {
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y,
url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y;
}
I hope this will help you :- http://tinkerbin.com/Iw4yJ1H3
here's one way you could do it. Not using backgrounds as such. Although you could place the images as backgrounds on the divs or simply have them added as images within the divs. You could even do away with the divs and sinmply use images instead of the divs.
http://jsfiddle.net/6UEXc/
Hope that helps.
is it possible to change the background-color of e.g. the first icon of this site with CSS3, or WebKit’s CSS extensions?
I'm new to this and would appreciate some help. A link or an example would be great.
Thank you in advance.
Although you can style an Image, but changing color of Icon is not possible in CSS3 as it requires Blending modes.
You can achieve this with HTML5 Canvas
// Color
var over = someCanvas.getContext('2d');
// Icon
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
use https://github.com/Phrogz/context-blender for achieving this.
If the icon image had a transparent background, then you could set the CSS background colour behind the image like this:
background: #c00 url(kombine-iphone-icons.png); /* Puts a red background behind the icon image */
Unfortunately, there’s nothing in CSS 3 (or any of WebKit’s CSS extensions) that lets you change the colour of images.
Try
img {
background-color: #FF00FF;
}
Yes, you can style an image with css3. But something tells me that you question is actually more specific that it looks like..