I've been attempting to add a gradient to my image, but it's not displaying properly
.asdf img {
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}<div class="asdf text-center tx-white">
<img style="height: 200px;" class="w-100 shadow-sm bd" src="{{url($xd->banner)}}"alt="">
</div>Can anyone guide me on the correct method to display the gradient on the image?
Try setting the background image instead of using the img tag.
.asdf img {
object-fit: cover;
}
.asdf .img { background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('https://cdn.the-scientist.com/assets/articleNo/66864/aImg/35078/foresttb-l.jpg');
width: 80%;
height: 500px;
background-size: cover;
}<div class="asdf text-center tx-white">
<div class="w-100 shadow-sm bd img" ></div>
</div>Here is an updated example with linear-gradient and img tag:
img {
max-width: 100%;
}
.hero-image {
max-width: 100%;
width: 800px;
margin: auto;
}
.hero-image::after {
display: block;
position: relative;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
margin-top: -150px;
height: 150px;
width: 100%;
content: '';
} <div class="hero-image">
<img src='https://cdn.the-scientist.com/assets/articleNo/66864/aImg/35078/foresttb-l.jpg' />
</div>
In order to enlarge an image and cover it with a background, you need to specify the width and height properties on the parent container of the image (div). Another option is to achieve this using the image itself.
Operating a classifieds website where anyone can view and contact posters without needing to be a member poses certain challenges. One of the main issues I face is the abundance of scam emails being sent to users, attempting to deceive them and steal their ...
In my Angular project, I am dealing with a dropdown menu that is followed by some data displayed in a div element. component.html <select class="form-control" id="power" required> <option value="" disabled selected ...
I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...
This question seems unfamiliar to me I have a loop in place for($i=0;$i<count($certifications);$i++){ $etc=certifications[$i]; .... <img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvent"> ...
Is it possible to utilize Web APIs to Schedule Notifications and send them at specific times? I am working on a CMS application that allows users to schedule and send push notifications for their mobile apps. I am interested in implementing something sim ...
I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...
Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...
Behold the mystical code written in HTML. <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> Beneath lies the enchanting CSS code for the aforementioned HTML structure. div { width: 100px; ...
I'm having trouble trying to set up a code that will rotate multiple images in a cycle for an image gallery I'm working on. So far, I've only been able to get one image to cycle through successfully. Any help or suggestions would be greatly ...
I am currently working with an HTML5 element: <input class="form-control" #semana="ngModel" name="semana" [(ngModel)]="detalle.semana" type="week"> When I retrieve the value, it comes in the format of a string such as "2018-W23". I am looking to co ...
For instance, suppose I wish to utilize the markdown as shown below: # AAAAAAAAAa BBBBBBB This would then be interpreted in such a way that AAAAAAAAAa is designated as h1, BBBBBBB as <p>, and the entire content enclosed within a prose div utilizing ...
I need to stack two div boxes on top of each other, and my goal is to hide the upper one when it's being hovered over. HTML: <div id="left_middle"> <div id="rfinder_UP"></div> <div id="rfinder_DWN"></div> </div> C ...
Greetings and thank you for taking the time to read my message. I am relatively new to this, so please bear with me if things seem a bit disorganized. I have constructed a table and am attempting to implement a hover effect to zoom in on a specific cell w ...
My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...
I currently have a masked background and a drop-down hidden behind it. Here is how it appears: https://i.sstatic.net/QTLN5.png However, I want it to look like this: https://i.sstatic.net/ZAreM.png This is the HTML code being used: <div id="sugges ...
I have been utilizing a jQuery plugin called Waypoints to handle scroll actions. My goal is to focus on the first input element of a section that is currently visible on the screen and then shift the focus to the input of the next respective sections as t ...
I am facing an unusual issue with Highcharts and Angularjs 1.6 integration. I have implemented components to display graphs based on the chart type. Below is an example of the JSON data structure: "Widgets":[ { "Id":1, "description":"Tes ...
I am looking to design a stylish interface using HTML & CSS. Here is the style I want to achieve: Currently, my interface looks like this: Although these are just reference images, you can see that my design does not have the same sleekness as the one in ...
My current project involves creating a page where the database is updated upon a drag-and-drop event. Specifically, I have implemented drag-and-drop functionality on a page, and whenever a div (deal-card) is dragged and dropped into another div (stage-colu ...
I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...