I need to darken the background of an image but not its contents inside like the below picture. The image is being painted programatically so I cannot have its url in the css.
Below how it should look like:
And now how it´s looking for me, I need the characters much whiter:
I´ve looked at different answers using ::before or ::after but given my image is being rendered inline it does not work. Below my code.
REACT.TSX
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
</div>
</div>
</Link>
))}
CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
}
.apartmentText {
color: white;
font-weight: bold;
}
Any idea on what to do?
Thanks a lot!
Try the following:
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
<div className='color-overlay'/>
</div>
</div>
</Link>
))}
And CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.apartmentText {
color: white;
font-weight: bold;
}
.apartmentText, .subApartmentText {
position: relative;
z-index: 1;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.3);
pointer-events: none;
}
I tried it and it worked for me, but locally I made some changes, so I can load an image. Please let me know if something is not working, so I can double check if I copied all the code correctly.
have you tried this with css?
background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),
Related
I'm working on a Vue project, and I want to add a logo image to the centre of a QRcode component. My code structure is similar as below shows:
<div>
<QRcode :text="url />
<img src="./logo.png" class="logo">
</div>
I'm currently just add position: absolute; property to the <img />, and calculate the position manually and make it looks like that the logo is in the centre of the QRcode component.
So, I'm looking forward to a better solution for this.
You can put any image on your Qrcode as long as your scanner detects them because they basically cover the center part of the Qrcode!
<template>
<figure class="qrcode">
<!-- Any qrcode component you like goes here -->
<vue-qrcode
value="https://github.com/fengyuanchen"
tag="svg"
:options="{
errorCorrectionLevel: 'Q',
width: 200,
}"
></vue-qrcode>
<img
class="qrcode__image"
src="https://avatars.githubusercontent.com/u/3456749"
alt="Chen Fengyuan"
/>
</figure>
</template>
<style scoped>
.qrcode {
display: inline-block;
font-size: 0;
margin-bottom: 0;
position: relative;
}
.qrcode__image {
background-color: #fff;
border: 0.25rem solid #fff;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
height: 15%;
left: 50%;
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 15%;
}
</style>
image on Qrcode: source
I have the following .scss file:=
.singleNews {
text-decoration: none;
font-family: $font-family;
font-size: $font-size;
font-weight: $regular-font-weight;
&__image {
padding: 5em;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&.featured {
height: 75%;
}
}
}
so how i can define the featured? i tried the following but all failed:-
import styles from './SingleNews.module.scss';
//code goes here...
<div className={styles.singleNews__image__featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image.featured} style={{ backgroundImage: `url(${post.image})` }}/>
&.featured selects the the parent selector with the class featured, which means that the div need have the classes singleNews__image and featured
.singleNews__image.featured {
background-color: blue;
width: 100px;
height: 100px;
}
/* Same selector with Sass */
/*
.singleNews {
&__image {
&.featured {
background-color: blue;
width: 100px;
height: 100px;
}
}
}
*/
<div class="singleNews__image featured">
</div>
$(document).ready(function() {
$('.carousel').carousel();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:focus {
outline: 0;
}
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: #000000;
}
.carousel {
height: 700px;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel .carousel-item {
cursor: -webkit-grab;
cursor: grab;
width: 400px;
}
.carousel .carousel-item:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.carousel .carousel-item img {
width: 100%;
}
.carousel .carousel-item h3 {
background-color: #ffffff;
color: #000000;
font-size: 2em;
font-weight: bold;
margin: -5px 0 0;
padding: 10px 5px;
text-align: center;
}
<div class="carousel">
<div class="carousel-item">
<img src="./img/gry1.png" alt="Dog" title="Dog" id="Dog">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Cat" title="Cat" id="Cat">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Wolf" title="Wolf" id="Wolf">
</div>
<div class="carousel-item">
<img src="./img/img1.png" alt="Tiger" title="Tiger" id="Tiger">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script><script src="./script.js"></script>
I'd like to change background for each item in my carousel, materialize adding "active" class for selected item in carousel but I cant figure out how to change bg (for whole page), I was trying to add background image to css for each item but it didnt cover whole page bg.
I think it will be good to solve it by jquery (check which item is "active" and select background for that item, adding it to body class)
The same script available on codepen:
https://codepen.io/crianbluff/details/PMZBVJ
You can do it like that.
I added the dummy data that contains image-url and I added carousel-item--* classes in HTML.
const setBackground = () => {
const number = document.querySelector('.carousel-item.active').classList[1].split('--')[1];
document.body.setAttribute('style', `background-image: url("${dummy[number]}")`);
}
in number variable, I am getting the carousel-item--* number and get the image-url of dummy data through index and add background-image through javascript
Codepen: https://codepen.io/NishargShah/pen/oNzwGwx?editors=1010
In my photographic portfolio, I display a series of images of different ratio in tracks that automatically fill the width of the display. That is working perfectly... after receiving some help.
My ultimate objective is to permanently display a little heart over the top-left corner of each image AND display a semitransparent strip over the bottom of each image containing the caption only on mouseover the image.
I have almost achieved that result but I can not figure out after hours of trying how to overlay the 2 elements as explained above... so for now trhey are together on top of the image... which is not optimal.
So I would appreciate some help to achieve that result if possible.
Here is part of the code in question and a sample can be found on my website : TwoOverlaysOnImage.
CSS code
.my-flex-item {
background-color: #1d1d1d;
border: 2px solid #1d1d1d;
height: 100px;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder p {
position: absolute;
display: inline-block;
text-align: left !important;
font-size: 0.7em !important;
width: 100%;
}
.img-holder:hover > p {
background-color: rgba(60,60,60,0.7);
text-align: center !important;
}
.img-holder span {
margin-top:40px;
color: white !important;
left: 30px;
}
HTML code
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<p>
<img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
<span class="thumbCaption">caption</span>
</p>
<a href="modal...">
<img class="my-flex-item" src="imagepath..." alt="caption..." />
</a>
</div>
</div>
Try this:
html:
<div style="width: 100%; display: flex; justify-content: center;">
<div id="img-cont" class="img-cont">
<img class="heart" src="path/to/heart/icon">
<div class = "hover">
<p>Sample Text</p>
</div>
</div>
</div>
CSS:
.img-cont{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.img-cont .heart{
position: absolute;
color: white;
top: 15px;
left: 15px;
cursor: pointer;
}
.hover{
clip-path: url(#img-cont);
position: absolute;
height: 0;
width: 100%;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.img-cont:hover .hover{
height: 50%;
}
.hover p{
color: white;
}
I am trying the create a search page, where when i add text in search panel the images of those text will display. The issue I am facing is that the images are overlapping on the search div even though I have positioned it well.
I don't want to fix it using top values as I want the page to be responsive and the top values will be changing based on the width of the page. Is there a cleaner way to do it ?
<div class="jumbotron text-center">
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}">
</div>
css:
#body {
width: 100%;
}
#search {
position: absolute;
top: 174px;
left: 0px;
width: 100%;
height: 30%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 10;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
}
.card {
position: absolute;
}
You can set the overflow on the card class to hidden(to hide the overlapping content) Or you can set it to auto( scroll bars appear if overlapping).
.card{
overflow: hidden;
}
Well you haven't positioned anything well there. Does everything really need the position property set to absolute? If so, try using JavaScript to get the search area's height (or set a fixed one) & apply it to the "top" property in the card.