I'm quite new with HTML and CSS so this might be quite a rookie question, or I may have some messy code. Below is the HTML for a div of my webpage's front page;
<div id="header" class="hero container mainfrontimage">
<h3>WEBSITE TITLE </h3>
<img src="../images/Logo.png" id="headerimg">
<div class="buttons"><a class="btn btn-alt" href="../3 Join us/joinus.html">JOIN US</a> SHOP</div>
</div>
and the CSS..
#header {
background: url('../images/WEBSITE TITLE pics/placeholder2.jpg') no-repeat;
background-size: 100%;
border-top: 4px ridge #E0CC95;
border-bottom: 4px ridge #E0CC95;
opacity: 0.75;
}
Essentially the header ID fills the div with my background image exactly as I'd like it, with the right opaqueness and styles. But, because the title, logo and buttons in the HTML are all included in this, they also become less opaque. I was wondering if there's some way of making just the image opaque with the borders etc. and have the text not be affected- like an exception.
I've tried putting the title, logo and buttons into a separate div but because the image itself is in the CSS it means the original div with id="header" is empty.. which wouldn't make a lot of sense and doesn't work either.
Sorry if this is a huge mess, I'm really new to this. If anyone somehow figures out what I'm asking and can provide a solution I'd really appreciate it!
Don't apply background image directly to the div, if you want to control only the opacity background image, and not of the content. Instead, use a pseudo element like below.
<div id="header" class="hero container mainfrontimage">
<h3>WEBSITE TITLE </h3>
<img src="../images/Logo.png" id="headerimg">
<div class="buttons"><a class="btn btn-alt" href="../3 Join us/joinus.html">JOIN US</a> SHOP</div>
</div>
#header {
position: relative;
border-top: 4px ridge #E0CC95;
border-bottom: 4px ridge #E0CC95;
}
#header::after {
content: "";
background: url('../images/WEBSITE TITLE pics/placeholder2.jpg') no-repeat;
background-size: 100%;
opacity: 0.75;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Related
I'm trying to do something that's probably quite simple, but I can't get my head around it.
I'm trying to overlay a transparent PNG with a fade over the top of another image using CSS if that's at all possible. I'm trying to achieve this result, but utilizing two images, the actual image and then the PNG overlay which creates the fade.
What I'd Like to Achieve
It's on a WordPress website utilizing the featured image system, so I'd like to make it simple for our editors who will be able to simply upload the featured image and have the fade overlay automatically, no need to edit the image etc or create a PNG with the fade already as that'll be a lot of image editing work. Trying to simplify the process.
The website for a look at the code
Any help with this would be amazing! Thank you in advance!
You can use the absolute position property to set the two images on top of each other. To have greater control over the filtering image, you can use the filter property and set the opacity you would like it at. This snippet shows three examples: One where the filtering image is set to 70%, one at 50%, and the other at 0%.
.ref {
position: relative;
height: 200px;
margin-bottom: 10px;
}
.imgMain {
position: absolute;
top: 0px;
left: 0px;
}
.imgFilter {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(70%);
}
.imgFilter2 {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(50%);
}
.imgFilter3 {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(0%);
}
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter" src="https://picsum.photos/200?image=1022" />
</div>
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter2" src="https://picsum.photos/200?image=1022" />
</div>
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter3" src="https://picsum.photos/200?image=1022" />
</div>
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
I have two images with text over them.
When I go to one image, the text of that image should disappear.
The code I wrote is ok and works almost fine.
<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
<div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
<div>
Css:
.sidebarimage, .sidebarimagesupermsg {
position: relative;
width: 100%; /* for IE 6 */
}
.h3sidebarimage, .h3sidebarimagesupermsg {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.h3sidebarimage span, .h3sidebarimagesupermsg span {
color: white;
font: bold 22px/45px Helvetica, Sans-Serif;
letter-spacing: 2px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer {
padding:0 5px;
}
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Please see the demo here:
http://jsfiddle.net/pikk/7dmzd7yc/
However it works fine for the 1 image. But if I go hover the 2 image, disappears also the text from the 1 image. And that's wrong.
Since I will have a lot of similar images in a sidebar, I don't want to duplicate the CSS code for each image. So I would like to know if there is a solution that permits me to keep only one copy of the css code.
I would like to keep the less CSS code as possible.
Thanks
The problem is that you are not closing your wrapping <div> tags. This should work:
<div class="sidebarimagesupermsg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
</div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
</div>
Here is an updated jsFiddle.
In addition to #JCOC611's answer above (about closing your <div> tags), you can also greatly simplify your CSS by using element tags instead of custom classes for each item.
In your question you mention:
I don't want to duplicate the CSS code for each image.
As it currently stands, your markup would need to add a selector for each image/h3 you add. If you generalize the selectors you can add a (theoretically) infinite amount without touching the CSS.
See this updated JS Fiddle for the simpler CSS.
So I'm extremely new to this html and css thing and I've got a bit of a problem. I'm in the middle of cutting a site for the very first time, but I'm having issues with the positioning of my sub navigation.
My issue is that the Sub Nav on my FAQS Page is being pushed off center and towards the right in the browser. But then, the subnav on the other pages like 'support', which use exactly the same html structure and css style as the one on the FAQS page, are fine and perfectly centered.
When I 'inspect element' in the browser, it seems to be thinking there's an extra subnav button on the left hand side and that the FAQS subnav button is positioned in the middle of the subnav , if that makes sense?
There's a second FAQS Page in the folder which works...but that was made by literally copy and pasting the code from the support page and then cutting out the bits that weren't needed, then copying in the parts from the FAQS page that I needed onto this .html instead.
So I have a feeling it's just a typo or a syntax error or something realllllly simple. I just really want to know what I did so I can avoid it in the future and know how to fix it.
Here is the html for my sub nav ( & page title ):
<div class="grid grid-pad">
<div class="col-1-1">
<div class="subnav clearfix">
Support
FAQS <div class="triangle"> </div>
Swifd Forum
Video Tutorials
</div>
<div class="pagetitle">
<h1 class="pageheading"> FAQS </h1>
<div class="pageheadingborder"> </div>
<h2 class="subtitleFAQS"> Got questions that need answering? <strong> we've got you covered</strong></h2>
</div>
</div>
</div>
And Here is the CSS so far:
/*---------------- SUB NAV ---------------*/
.subnav {
margin: 0 0 60px 0px;
text-align: center;
}
.subnav a {
display:inline-block;
font-family:'Bebas Neue', 'Oswald', Arial, sans-serif;
color:#ffffff;
background-color:#000000;
line-height: 1.5;
font-weight:bold;
text-transform:uppercase;
font-size: 23px;
margin:5px;
width: 180px;
position: relative;
transition: all 200ms ease 0s;
}
a.b1.subactive {
background-color: #ee812c;
}
a.b1.subactive div.triangle {
width: 0;
height:0;
border-style: solid;
border-width: 15px 32.5px 0 32.5px;
border-color: #ee812c transparent transparent transparent;
position: absolute;
top:100%;
left: 50%;
margin-left: -30px;
z-index: 2;
}
.subnav a:active {
top: 2px;
}
I know it's a bit rusty, but any help would be greatly appreciated.
Here is an extremely basic model : https://jsfiddle.net/2Ly4v9qu/
Thankyou!
I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.