When I double-clicked or single-clicked on the image its overlay light black background.
My question is that how to remove overlay light black background on double-click.
Note: show below attachment image. I double-clicked or single-clicked on the Pepper image.
Please help me.
Can Please refer or modify your code as given below:
HTML:
<div class="img_box">
<div class="image"><img src="Your image path.jpg or png or anything"></div>
<span></span> <!-- For adding overlay in css -->
</div>
CSS:
.img_box {
display: inline-block;
position: relative;
cursor: pointer;
}
.img_box span {
background-color: rgba(0,0,0,0.7);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
}
JS:
$('body').on('click','.image',function() {
$(this).next().fadeIn();
});
$('body').on('click','.image + span',function() {
$(this).fadeOut();
});
Related
I have an image with an icon on top if it:
<font-awesome-icon class="icons bookmark" icon="fa-solid fa-bookmark"></font-awesome-icon>
<img :src="images[0]" #click.native="visit(l._id)" />
But on mobile devices, it ALWAYS clicks the image behind the icon. Is there a way to prevent this?
Here are my CSS classes:
<style scoped>
img {
border-radius: 25px;
margin: 8px;
width: calc(100% - 50%);
}
.icons.bookmark {
font-size: 1.5em;
z-index: 100;
position: absolute;
top: 20px;
left: 1em;
}
.icons.bookmark:hover {
color: green;
}
</style>
here it is on the image:
Set pointer-events: all on the icon. Check it out on the mdn web docs.
I am not sure if this will solve your problem, because you said it only fails on mobile devices, but give it a try.
I have been toying with this for hours and decided to ask. I am trying to replace my checkboxes with Font Awesome icons within a circle div. When the checkbox is checked the circle color is supposed to change.
I have managed to get the icons to replace the checkboxes, but I can not get the background to change when selected. I personally think I over thought this and it could probally be done much simpler, but this is what I have.
HTML:
<div class="actions thread-actions">
<div class="checkbox visible">
<button class="action primary-action visible" title="$vbphrase[save_changes]">
<label for="cb_visible"><input type="checkbox" name="visible" value="yes" id="cb_visible" checked /></label>
</button>
</div>
</div>
CSS: (SCSS)
$brand-success: #5cb85c !default;
$brand-danger: #d9534f !default;
.thread-actions .checkbox {
input[type=checkbox] {
position: absolute;
margin-left: -100em;
margin-right: 100em;
font-size: 1em;
}
input[type=checkbox]:before {
position: absolute;
left: 99em;
}
}
/* Colors ---------------------- */
.thread-actions input[type=checkbox]:checked {
color: $brand-success;
}
.thread-actions {
input[type=checkbox]:before {
font-family: 'FontAwesome';
}
}
.thread-actions {
.checkbox.visible input[type=checkbox]:before {
content: "\f023";
margin: -22px 0px 0px 17px;
}
.checkbox.visible input[type=checkbox]:checked:before {
content: "\f023";
background-color: #ff0000;
/* f3c2 */
}
}
.actions .action {
font-size: 26px;
border: 0;
border-radius: 50%;
height: 48px;
width: 48px;
position: relative;
}
How can I achieve this effect?
I have a live PEN here where I have been playing with this.
After starting from scratch and re-thinking this through, I managed to come up with a solution.
Instead of enclosing the input with pointless divs, then trying to style each div I worked with only the input.
To achieve this effect, start by pushing the standard checkmark out of the way:
input[type=checkbox] {
font-family: 'FontAwesome'; // tell this element to use FA
position: absolute; // absolutely push this thing away
margin-left: -100em; // buh bye checkmark
font-size: 26px; // FA icon size
}
With the checkbox out of the way we can move on to styling as we wish:
input[type=checkbox]:before {
left: 100em; // where the checkmark should have been
border-radius: 50%; // circle
position: absolute; // we want it absolutely where we placed it
text-align: center; // FontAwesome icon alignment
height: 40px; // height of the circle
width: 40px; // width of the circle
background-color: #337ab7; // circle color
color: white; // icon color
content: "\f070"; // FA icon
}
With this as a base we can move on to styling our checked boxes by simply overriding our base style:
input[type=checkbox]:checked:before {
content: "\f06e"; // FA icon
background-color:#be0000; // circle color
}
Sometimes going back and rethinking things helps, hope this helps someone =)
Here is a live preview of the end result.
I have an image that's white with a transparent background; I'd like to be able to dynamically color/tint the image on hover to another color.
My first thought was to use background-blend-mode to multiply a solid red image with my white-on-transparent image to get a red-on-transparent image. Unfortunately, this doesn't give the desired behavior and instead gives me a solid red box. Example here: https://jsfiddle.net/wcL2exa4/58/
I've looked into CSS mask but that also doesn't seem to do what I want. How can I easily turn my white image into a colored one?
thank you!
You can try using mix-blend-mode on a pseudoelement. I've used multiply and screen in the example below
document.getElementById('c').addEventListener('change', (e) => {
const mode = e.target.checked ? 'screen' : 'multiply';
document.documentElement.style.setProperty('--blend-mode', mode);
})
:root {
--blend-mode: multiply;
}
#container {
position: relative;
background: black;
width: 100%;
height: 250px;
margin-bottom: 2rem;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background: url("https://storage.googleapis.com/astrology-images/constellations/aries-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red;
mix-blend-mode: var(--blend-mode);
}
<div id="container">
<div id="constellation" class="bg">
</div>
</div>
<input id="c" type="checkbox"><label for="c">Red Background</label>
There is a way but it's a bit weird
filter: brightness(0.5) sepia(1) hue-rotate(50deg)
Change the brightness and hue rotate till you get the colour you want.
Are all background image white ?
You may do it by changing the default image to a red version, and apply some filter to it to get it white.
I'm using Ionicons (http://ionicons.com/) and I'm new to css. I'm wondering whether it's possible to overlay a banner that states 'new' over the top right corner of the Icon.
Is there an easy/standard way of doing this? (either to a ionicon or a favicon)
Thanks!
Just add the following new class to any icon that you want:
.new:after {
content: 'new';
position: relative;
top: -10px;
left: -2px;
background-color: tomato;
font-size: xx-small;
}
You can change the color and position and add any other style as you wish.
.new:after {
content: 'new';
position: relative;
top: -10px;
left: -2px;
background-color: tomato;
font-size: xx-small;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<i class="ion-ios-flask new"></i>
jquerymoble.com has section headers that look like they wrap around the edge of the page.
This wrapping effect is achieved by having a little triangle above the div containing the text. i cannot for the life of my figure out what css creates this triangle.
If you have firebug, go the this page and replace (in html edit mode) the entire body tag with this html:
<header id="header">
<section id="page">
<p class="flag"><em><a style="color: rgb(0, 0, 0);" href="http://jquerymobile.com/2010/11/jquery-mobile-alpha-2-released/">jQuery Mobile 1.0 Alpha 2 Released!</a></em></p>
</section>
</header>
how do they get that wrapping effect on the left?
In their CSS: #page .flag:after {
content: "";
display: block;
width: 0;
height: 0;
border: solid 3px #fff;
border-color: transparent #FFC32C #FFC32C transparent;
position: absolute;
top: -7px;
left: -7px;
-webkit-transform: skew(10deg,0deg) translate(-1px,0);
transform: skew(10deg,0deg);
}It looks as if they are using the CSS border method to create the shape.