If you have an image that covers an entire element through CSS like this
#myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}Now, what if you want to add a gray overlay on the left side of the image similar to the examples shown below?
Is there a way to achieve this effect? It doesn't have to be identical, just something similar.
https://i.sstatic.net/DsXH4.png https://i.sstatic.net/w3YuE.png
If you want to add some style using linear-gradients, you can do so by utilizing the background-image property.
html {
min-height: 100%;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* adjusting opacity as needed */
linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* creating a red line effect */
url(http://lorempixel.com/200/200/fashion); /* with an image layered beneath gradients */
background-size:
auto,
auto,
auto 100%;
}One option is to play around with a pseudoelement and a background using RGBA, like so:
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
You can view this example on Codepen here: http://codepen.io/anon/pen/OyVYwe
Another approach is to simply add a transparent left border to the element, like this:
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
You can view this example on Codepen here: http://codepen.io/anon/pen/ZbGNqL
Alternatively, you could use an inset box-shadow effect:
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
You can view this example on Codepen here: http://codepen.io/anon/pen/avOrXE
Please refrain from voting for this response, as it originated from user3791372's comment and not myself. If you believe this is the correct approach, please explain your reasoning in a comment.
http://codepen.io/anon/pen/MaaWMB
<div id="mydiv">
<div id="sidebar"></div>
</div>
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom;
width: 230px;
height: 400px;
}
#sidebar {
background-color: white;
opacity: 0.2;
filter: alpha(opacity=20);
width: 50px;
height: 100%;
}
Check out my Codepen link for the resizable event While using Jquery UI resizable, everything is functioning correctly. However, I am now looking to have the resizable event activate one block at a time. When another block is clicked, the resizable event ...
Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...
While working on a Node server locally, my SVG filter functions properly. However, once I build the project and run it on a server, the filter stops working. This VueJS project is utilizing Webpack as its build tool. The process of building the app invol ...
I'm currently working on creating sortable images using jQuery in an HTML document. I've encountered an issue with the source code here. I have implemented the jQuery sortable function in a functions.js file and successfully tested it on another ...
Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...
I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...
Images are being shown inside an HTML table using PHP code : This is the code for the table : for ($i = 0; $i < $data['list']['cnt']; $i++) { $tabRows[$i][1]['width'] = "45%"; $tabRows[$i][1][&apos ...
Struggling to add a custom close button to my Youtube video pop up. After unsuccessful research attempts, I'm turning to my fellow stack buddies for help. Any suggestions? ...
I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...
Below is the example of an HTML structure: <span id="17">yes here</span> <div class="PricevariantModification vm-nodisplay"></div> <div class="PricesalesPrice vm-display vm-price-value"> <span class="a"></span> ...
Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...
I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...
My website displays a table with a background image that appears normal in FF and Chrome, but not in IE. The background image seems to shift and produce strange results. Can anyone here help me figure out what's causing this issue? Please refer to the ...
In my attempt to implement word-wrap for my JLabel's text, I referred to this question. The code snippet I used for this purpose is as follows: label.setText("<html style=\"vertical-align:middle;\">"+label.getText()+"</html>"); ...
Forgive me if this sounds like a silly question, but I am completely new to javascript and its libraries. I stumbled upon a similar issue as described in this thread, where the accepted solution included the following line: <link rel="stylesheet" href ...
I recently used Bootstrap 4 to write the code below. In the image provided, I have outlined what my goal is with this code. Thank you! https://i.sstatic.net/oB6b6.jpg <style> div.jumbotron { background: #458392 url("img/ban ...
Is there a way to determine the cursor's offset from the top of a textarea's view rather than its position? While e.target.selectionStart provides the cursor position, $el.scrollTop gives the scroll offset of the textarea. Any suggestions on ho ...
Can anyone come up with a brilliant solution as to why my internal links are not functioning properly on a webpage? I've coded the HTML with the usual <a href="#link"><button>Some Text</button></a> .... bunch of content .... & ...
I'm having trouble resizing the height of the navbar-default in this Bootstrap sample. It seems to be too big for my needs. Are there any Bootstrap classes I can use to adjust the height? For example: <form class="navbar-form navbar-left" role="s ...
Hey there! I have a challenge where I want to anchor an image at the bottom right corner of a webpage. Initially, it works perfectly using this CSS: .logo img{ position: absolute; bottom: 0; right: 0; } However, when I resize the window, the ...