I've put some text on top of an image inside a container div, in a responsive layout. I'd now like to create a "rollover" effect where on mouse over the text gets a transparent green background-color covering the entire div / image. Hence the image looks a bit green.
See http://www.advocatedesign.co.uk/
Any help would be gratefully received!
You're going to need another div that you can use as the "overlay" layer.
JSFiddle Example
(In the future, please include a JSFiddle within your question with the relevant code as it helps everyone who is helping you)
HTML
<div class="case_study">
<div class="overlay"></div>
<a href="small-woods.html">
<img src="http://lorempixel.com/400/200/" alt="Small Woods case study">
<p>Small Woods</p>
</a>
</div>
CSS:
.case_study{
position: relative;
height: 200px;
width: 400px;
}
.case_study:hover .overlay{
background-color:green;
opacity: .3;
height: 100%;
width: 100%;
position: absolute;
}
Please comment on this answer because I'm not sure exactly what you want...
but are you looking for the hover selector?: http://www.w3schools.com/CSSref/sel_hover.asp
Set the class to hover and stick the desired background-color in there:
P:hover
{
background-color:green;
}
Related
I have 2 div elements with background-color set overlaying on top of another div with content. In case-1 overlay is not a sibling of the content div so it allow background text to be visible to user.
In case-2 the overlay is a sibling of the content div so it is not showing the text to user.
Case-1
<div class="overlay"></div>
<div class="example-container">
<div class="child1">
Case 1 - Sample Text 1
</div>
</div>
Case-2
<div class="child1">
Case 2 - Sample text 2
</div>
<div class="overlay">
</div>
Sample JSfiddle to simulate 2 scenarios.
Any idea why this behavior in html? How could we make the overlay div with background color (case-2) always allow text transparency.
The issue here is that the div is being rendered over the text. This can be fixed easily by giving the overlay a z-index property of -1. This makes the div render under the text, allowing you to see it.
example overlay css
.overlay {
position: absolute;
background-color: gray;
top:0;
left:0;
width: 100px;
height: 100px;
z-index: -1;
}
Alternatively since you want it to overlay (if you actually don't that is a very misleading name) just set the opacity lower
.overlay {
position: absolute;
background-color: gray;
top:0;
left:0;
width: 100px;
height: 100px;
opacity: 0.5;
}
Setting the position property for all siblings make this work.
I found this article very helpful, it explains various scenarios.
https://coder-coder.com/z-index-isnt-working/
A sample fiddle that works.
https://jsfiddle.net/praveenr/ukpw63hc/
I am trying to make a slider. How can I put one image into another image and
put text and a small image in that image(the last one)? I have put one image into another one with no problem by giving position:relative in for main div and giving the second image position:absolute. But the third part (putting small image and text in that image) is tricky. I gave the container of image and text position absolute, but it is positioned out of the image div. Maybe a small example could help. Thanks
#maincontainer{
width:650px;
margin:0 auto;
margin-top: 25px;
position: relative;
}
#image1container
{
width: 650px;
margin:0 auto;
margin-top: 25px;
position: absolute;
top: 95px;
left: 137px;
}
#image2container{
position:absolute;
}
You could try using the background-image CSS property of <div> elements in HTML. Your HTML would look like this:
<div id="maincontainer">
<div id="image1container">
<img src="small-image.jpg" alt="Small image />
<p>Text in image</p>
</div>
</div>
And your CSS would look like this:
#maincontainer {
background-image: url('main-container-image.jpg');
}
#image1container {
background-image: url('image1-container-image.jpg');
}
From here, you could use CSS to position the elements as needed.
Let's say that I have an image that can be a variable width (min:100px, max:100% [760px]). I also have a <p> element that is to be shown right below the image. I'd like the <p> to end up with the same width as the <img>, but I can't seem to find an answer.
Here is the code involved in such a scenario jsfiddle:
html:
<div id='page'>
<figure>
<img src='http://www.myimage.com/img.jpg'/>
<p>Hi there. I am some text. I would like to start where the image starts :(</p>
</figure>
</div>
css:
#page {
width:760px; /* arbitrary */
}
figure img {
display: block;
border: 1px solid #333;
max-width: 100%;
min-width: 100px;
margin: 0 auto;
}
figure p {
/* ??? */
}
Any ideas?
You can use display: table on the figure and set a small width on it. Because it's a table layout it'll then become as wide as the content, in this case the image.
figure {
display: table;
width: 1%;
}
Demo
It is inheriting from #page div. not from the image. Please see the same fiddle updated.
But, You can control individual elements. You have to specify how you wish it to look like.
Here is the FIDDLE that I made using
HTML:
<div id='page'>
<figure>
<img src='http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg'/>
<figcaption>Hi there. I am some text. I would like to start where the image starts :(</figcaption>
</figure>
</div>
CSS:
#page {
width:760px; /* arbitrary */
}
figure{
padding-left: 10%;
}
Actually there are several ways to make an image caption, such as using <table>. I'm not saying that this is the best way to do that. But this is the easiest way since I see you're using <figure> there. I hope this helps you.
Some pages contain page-header element/class.
.page-header class look like this:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
}
For Example:
index.html
<div class="page-header">
<h1>Homepage</h1>
</div>
about.html
<div class="page-header">
<h1>About</h1>
</div>
I want to add small image on top of the page-header using css, each page will have different image. How to do this and should I use span with css ?
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds
Yes you can add a SPAN and give the image,
NOTE: if you give any image to the header as a background, it will not useful to SEO, I suggest same image keep in IMG tag and out of the screen to get some SEO help too.
Ex:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
position:relative;
}
.out-of-screen {
position:absolute;
top:-2000em;
}
<div class="page-header">
<h1>Homepage</h1>
<img src="/public/images/page-header.png" alt="alt text" class="out-of-screen">
</div>
If your looking for a secondary background image to be overlaid on the previous background image. Then try this. I haven't tried it myself but it may be the answer.
.page-header:after{
background-image:url('/public/images/page-header2.png' no repeat;
}
You may need to position the :after to where you want it on the page but it maybe easier to stick with the simple image tag as Sameera has suggested if you want the image to be in a certain location within the element.
position:fixed;
left:0;
top:30%;
width:200px;
height:auto
<div class="page-header">
<h1>Homepage</h1>
<img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />
</div>
there is a css property calles z-index.
The higher the value the most 'front' it will be.
The lower the more Back t will be
Négative value are okay.
.front{
z-index: 999;
}
.back{
z-index: 0;
}
NOTE: different-browser seems to have different behaviour.
To answer your question, Give a z-index lower to your header and add an elemt (span would be good) with an higher z-index
Use Multiple Backgrounds with CSS3.
Add padding-top to .page-header position page-header.png to bottom and
place second background at top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://www.css3.info/preview/multiple-backgrounds/
CSS allows us to add multiple backgrounds images just by adding a comma (,) between them.
HTML
<div class="bg-image">
CSS
.bg-image{
outline: 2px solid black;
padding:20em;
background-image:
url(https://images.unsplash.com/photo-1634148739677-a5bb54df2611?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80),
url(add another ".svg img" or any type of image);
background-repeat: no-repeat, repeat;
background-position:right 20% center 0px, top left;
background-size:auto, 10px;}
I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.
so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/
The code for the logo tag is:
<div id="header">
<p id="logo">
</p>
Here is the CSS, added as per comments
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
padding-top: 2em;
z-index: -1;
}
So how can I make this into a valid link.?
I don't want to add any visible text as it will look ugly.
I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.
The easiest thing to do is make the a take up some space. It's already properly positioned, so there's only a little bit to do.
Remove these css width and height properties:
#logo a {
width:1px;
height:1px;
}
Then add a little text to the a:
StopSweats
The text won't be displayed because you have text-indent: -9999px applied to that a, but the block will be about the right width and height to cover the banner image area.
Write like this:
HTML:
<div id="header">
</div>
CSS:
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
display:block;
width:245px;
height:60px;
margin-left:90px;
}
http://jsfiddle.net/rEFRw/
Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..
CSS
#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}
HTML
<div id="header">
<p id="logo">
<img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" />
</p>
</div>
Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.
Also if your #logo id has width and height value set than change accordingly.
#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}
you may have to adjust some css of other tags also. but it will work