Set opacity on background-image with media query - javascript

I have a couple of divs, each with a background image. I'm using responsive and adaptive CSS, and when my divs' widths gets less than a certain size(760px btw), the text and some tables with styling becomes hard to read/see with the background image moving in behind them(the background image is on the far right of the text/tables and unobtrusive if the width is above 760px...). So when the width of the viewport gets to 760px and less, I only want the background image to have an opacity...
How do I do that?
So my CSS starts like this:
#media screen and (max-width: 760px){
background: #cdcdcd url("/images/back.jpg") no-repeat top right;
/*How do I set the opacity of only the background?*/
}

You can not change the opacity of a background image, unless you move it to a separate container.
All you can change is the opacity of BG color using rgba():
background: rgba(0, 0, 0, .5);

You can't set opacity just for a background, but the whole element. You can set opacity of background color (see Zoltan's answer for the example).
You can set white <div> over the image and change it's opacity.
<div class="yourImage">
<div class="imageCover"></div>
</div>
.yourImage {
background: url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png);
width: 300px;
height: 83px;
}
.imageCover {
background: #fff;
width: 300px;
height: 83px;
opacity: .5;
}
Live demo: Tinkerbin
However, this won't work if you don't have a clean background BEHIND your image.

Related

Specific CSS rules for overlapping shapes/divs

I'm trying to recreate a screenshot app to better understand HTML, CSS and Electron and so far I've made a keybind that toggles the overlay of a 0.25 opacity transparent box that fills the screen. And a transparent red outlined box that can be dragged to select an area for the screenshot
As the red box is transparent and is on top of the 0.25 opacity box that fills the screen, the red box has the same opacity as the rest of the screen. I want the area inside the red box to "clear the opacity" so that it is viewed as 0.0 opacity, basically a "bright area" in the red box that looks the same as the screen would without the opacity. Like this
I tried setting the rgba to (0,0,0,0) but that didn't change anything as I expected and I cannot find any documentation for CSS about overlapping elements.
Do you have any idea on how I can implement this?
The first thing that comes to mind for me is a huge box shadow on a transparent element. I don't know how performant this is, but it works.
.screenshot {
position: fixed;
top: 50px;
left: 50px;
width: 300px;
height: 100px;
border: 1px solid red;
/* large box shadow */
box-shadow: 0 0 0 max(100vw, 100vh) #0005;
}
<div class='screenshot'></div>

Strange CSS transition behavior on adding class

Class Event 1 is what I am trying to achieve by just placing class directly and not adding hover properties, though it's working for Hover Elements.
Please check this pen and you can find the problem by following the below instructions:
Type anything in the "Name"
Click Tab
You should reach the 1st State(Orange border on left and bottom and some transition effect), in which it pulls itself from the right corner, I don't understand why it's doing that. It working completely perfect in the Hover Example which is referenced above as well.
Understanding of my CSS
.draw {
transition: color 0.25s;
It gives an imaginary border of 2px transparent, which we will highlight later
&::before,
&::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
This is where you start the transition of ::before from top-left corner
/* This covers the top & right borders (expands right, then down) */
&::before {
top: 0;
left:0;
}
This will change the color of the text.
&.dj {
color: rgb(255,123,0);
}
Here I want to expand it till 66% width.
/* Class styles */
&.dj::before,
&.dj::after {
width: 66%;
height: 100%;
}
Is it mandatory to add/recommended ::after?
&.dj::before {
border-bottom-color: rgb(255,123,0);
border-left-color: rgb(255,123,0); // Make borders visible
transition:
height 0s ease-out, // Width expands first
width 0.25s ease-out; // And then height
}
}
I can see a couple of differences between your hover demo and your tab implementation.
The first is that in the hover demo a left border is applied to .draw:before and a bottom border to .draw:after. In your tab implementation both borders are applied to .draw:after, and since .draw:after is aligned to the bottom of the button this messes up the vertical animation, which you actually want to start from the top and animate in a downward direction. This is fixed by giving .draw:after top:0 instead of bottom:0.
The second problem is that you are applying the .draw and .dj classes simultaneously. As a consequence the border width and height is applied immediately. What you need to do is toggle between the width height start and end values. I suggest applying the .draw class directly to the button in your markup, and instead of toggling both classes, only toggle the .dj class when the user tabs.
Here is a forked pen with these changes applied: https://codepen.io/jnicol/pen/EbNavz
There are various other enhancements that could be made, but those changes should fix the immediate problem you have described.

Responsive Menu with Text on Background Image

I have a responsive menu on top of an image background, which also has text on top.
Because I have to set the text messaqge with "position: absolute" to make it overlay on top of the background image, when I expand the menu the menu items will overlay on the text message. How do I fix that?
The other problem is I'd like to have the menu be transparent on the background image instead of being on the dark grey background. However, I can't seem to find a way to do that.
Here's the code
You may want to consider for you header message to put it inside of your header-slides div and then position this div to relative. That way your header message is actually positioned absolutely in the header and not in the body. Then if you want your nav to be transparent over the header image then you can position your body to relative just to be safe and position your nav to absolute, give it a high z-index and background opacity can be achieved by using rgba colors. So something like the following:
Here is a fiddle demo Fiddle Demo
Header:
.header-slides {
height: 500px;
border: 1px solid black;
position:relative;
}
<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
<h2>Header Message</h2>
</div>
Then your nav:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,20,20,0.8);
min-height: 30px;
position:absolute;
top:0;
left:0;
width:100%;
z-index:5;
}
And then remove the postion of relative from your responsive css at max width of 680px from your nav so remove the following completely:
ul.topnav.responsive {position: relative;}
z-index, bruh.
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
.topnav{z-index:9999999}
try it.
For transparent BG colors you can use rgba(). There are online tools to convert your colors all oer the place.

Transparent PNG Reacting to Sites Image Sliders and Content

I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.

HTML DIV as the Background of another DIV

Is it possible to place 1 DIV inside another DIV and have the DIV inside have a larger width and height than the DIV it is contained within?
Sounds like a riddle....
Basically I want to have a container that the user can set the width and height of. They will have also selected and image, cropped it and resized it using jQuery. The image will be the background of the container, however due to the fact that the background image could be made bigger than the container I want it to be possible for the background to be a DIV that can expand beyond the height and width of its container - To crop the image if you like.
Do able?
Yes, if I'm understanding you correctly
the container would be relatively positioned, the div "inside" would be absolutely positioned inside it -
the absolute positioning co-ordinates and getting the image centered would be done something like this, at default,
#inner {
position: absolute;
top: 0 ;
left: 0;
right: 0;
bottom: 0;
background: url(theimage.jpg) no-repeat 50% 50%;
}
this should center the image in the user sized container
then the "cropping tool" would be able to manipulate the co-ordinates (in an equal measure I presume) either + or - those 0 values, -, negative, ones will allow it to expand outside the "outer" container
$('<div>').attr('id', 'innerdiv').appendTo($('#div'));
CSS
#div{
height: 100px;
width: 100px;
background: green;
}
#innerdiv{
height: 200px;
width: 200px;
background: red;
}
HTML
<div id="div"></div>
http://jsfiddle.net/bKetM/
A background image will be 'cropped' by default. For example, if I have a 500px by 500px div and then I put a 1000px by 1000px image as its background then it will show the top left 500px by 500px of that image as a background. I could set the background image to be centered like so:
background:transparent url(image.png) no-repeat center;

Categories

Resources