I have a box with a background, which is dimmed when hovered on. There is also a text, which is uncolored (transparent color), I'm trying to set its color to white when parent element is hovered on.
I know this should work:
#someDiv:hover > .someClass {
color: white;
}
But in my code it doesn't. Can anyone point me to the mistake?
jsfiddle here.
HTML:
<div class="row">
<div class="box" style="background:url('http://images6.fanpop.com/image/photos/34000000/Sandor-Clegane-sandor-clegane-34035068-960-640.jpg')">
<div id="overlay"></div>
<div class="hashContainer"><span class="tru">123</span></div>
</div>
CSS:
.box {
display: inline-block;
width: 300px;
margin: 40px;
height: 300px;
background-size: cover;
z-index: -1;
}
.hashContainer {
pointer-events: none;
position: relative;
top: 22%;
}
#overlay {
height: 300px;
width: 300px;
position: absolute;
}
#overlay:after {
content: "";
display: block;
height: inherit;
width: inherit;
opacity: 0;
background: rgba(0, 0, 0, .5);
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
#overlay:hover:after {
opacity: 1;
}
.tru {
font-size: 70px;
color: transparent;
font-weight: 900;
transition: all 1s;
}
/* not working */
#overlay:hover > .tru {
color: white;
}
/* not working */
.box > .tru {
color: white;
}
In my case, I'm trying to apply color change to the tru class span, while box \ overlay divs are hovered.
The [#overlay] is a sibling of[+] [.hashcontainer and .hashcontainer] the parent of[>] [.tru]
CSS
#overlay:hover + .hashContainer > .tru {
color: white;
}
HTML
<div id="overlay"></div><!----------------[#overlay isn't a parent of .hashContainer but an actual sibling]-->
<div class="hashContainer"><!-------------[.hashContainer is the parent of .tru]-->
<span class="tru">123</span>
</div>
http://plnkr.co/edit/H2Up3Y2YD6fl5uiwQky4?p=preview
Consider the following HTML document:
<html>
<head>
<style>
.someClass:hover { //mention in this manner
background: blue;
}
</style>
</head>
<body>
<div id="id1" class="someClass" >
<h1 id="id2" > HELLO MAN </h1>
</div>
</body>
</html>
The above code works. Color changes to blue when you hover over <div>.
Related
$(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
I'm trying to make an image semitransparent on hover and display text that is otherwise set to display: none. Currently if you hover over an image, it becomes semi-transparent (.single-image:hover works), but the text doesn't appear. When the text was not set to display: none, it is positioned over the image in the bottom left-hand corner. I thought that since it is over the image, the hover pseudo-class would take effect. I also tried setting the z-index of .attribution to 1 but that didn't do anything.
<div className="image-container">
<a href={image.links.html} target="_blank" rel="noopener noreferrer">
<img className="single-image" src={image.urls.regular} alt="" />
<p className="attribution">Unsplash</p>
</a>
</div>
.image-container {
display: inline-block;
position: relative;
}
/* Text */
.attribution {
display: none;
color: white;
position: absolute;
bottom: 20px;
left: 20px;
}
.attribution:hover {
display: block;
}
.single-image {
margin: 7px;
height: 350px;
width: 350px;
object-fit: cover;
}
.single-image:hover {
opacity: 0.7;
transition: 0.5s;
}
You should move the hover function to the parent div.
Change .attribution:hover to .image-container:hover .attribution and .single-image:hover to .image-container:hover .single-image.
Strangely enough, in order for this to work, you also need to add border or background-color to your parent div. (Here is why)
I added a transparent color background-color: rgba(0, 0, 0, 0);.
.image-container {
display: inline-block;
position: relative;
background-color: rgba(0, 0, 0, 0);
}
/* Text */
.attribution {
display: none;
color: white;
position: absolute;
bottom: 20px;
left: 20px;
}
.image-container:hover .attribution {
display: block;
}
.single-image {
margin: 7px;
height: 350px;
width: 350px;
object-fit: cover;
}
.image-container:hover .single-image {
opacity: 0.7;
transition: 0.5s;
}
<div class="image-container">
<a href="#" target="_blank" rel="noopener noreferrer">
<img class="single-image" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="" />
<p class="attribution">Kitten!</p>
</a>
</div>
.cont {
position: relative;
height: 150px;
width: 150px;
margin: 1em auto;
background-color: red;
}
.layer {
position: relative;
height: 150px;
width: 150px;
color: Transparent;
}
.layer:hover { color: white; }
.cont:hover { background-color: blue;}
<div class="cont">
<div class="layer">My cool Text</div>
</div>
Why did you not set the color of the font to transparent? it's easyer. see my little example (2 minutes workaround...)
Add a bit of javascript to make the text appear aswell as the image fade.
as only one element can be in hover state even if there ontop of each other.
unless you mess around with js you might be able to 'hack' a double hover state.
try;
<div className="image-container">
<a href={image.links.html} target="_blank" rel="noopener noreferrer">
<img className="single-image" src={image.urls.regular} alt="" />
<p className="attribution">Unsplash</p>
</a>
</div>
.image-container {
display: inline-block;
text-align:center;
position: relative;
z-index:1;
}
/* Text */
.attribution {
display: none;
color: white;
position: absolute;
z-index:3;
bottom: 20px;
left: 20px;
}
.single-image {
margin: 7px;
height: 350px;
width: 350px;
object-fit: cover;
z-index:2;
}
.single-image:hover {
opacity: 0.7;
transition:opacity 0.5s ease-in-out;
will-change:opacity;
}
<script>
document.addEventListener(DOMContentLoaded,(e)=>{
const img = document.getElementsByClassName('single-image')[0];
const attrib = document.getElementsByClassName('attribution')[0];
img.addEventListener('mouseover',(e)=>{
img.style.opacity = '0.7';
attrib.style.display = 'block';
});
});
</script>
I am using bootstrap 3 and I want to make an image button i.e. the button should have:
an image background
The button should have a custom translucent dark overlay that lightens on hover and becomes even darker on click.
fixed height (of 300px), and width 100% (so that it occupies the entire parent div class="col-md-4").
The image should be cropped i.e. overflow: hidden
I tried to achieve this by setting the image as background to my parent <div> and used a child <div> for the translucent overlays. But I had to write a lot of jquery to change the states onhover, onclick, etc.
I realized I should be using a button, and not a div but I could not style it and make it overlay the parent div.
Current code:
HTML element:
<div class="col-md-4" style="background-image: url('...'); overflow: hidden; height: 200px; margin-bottom: 24px">
<div class="img-panel translucent-overlay-light"> <!-- Should be a button or a tag -->
<div>
Hello
</div>
</div>
</div>
javascript: (ideally there should be no js, all this should be done in CSS)
$('.img-panel').click(function() {
// do something
});
$('.img-panel').mouseenter(function() {
var elm = $(this);
elm.removeClass('translucent-overlay-light');
elm.addClass('translucent-overlay-dark')
}).mouseleave(function() {
var elm = $(this);
elm.removeClass('translucent-overlay-dark');
elm.addClass('translucent-overlay-light')
});
Also, I am using SCSS anyway so both SCSS and CSS answers are fine.
Not hard, just using css:
.my-button {
display: block;
position: relative;
height: 300px;
line-height: 300px;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
cursor: pointer;
font-size: 18px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
background: url('https://placeholdit.imgix.net/~text?txtsize=23&bg=22ffdd&txtclr=000000&txt=&w=250&h=250');
}
.my-button::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, .4);
}
.my-button:hover::after {
background: rgba(0, 0, 0, .2);
}
.my-button:active::after {
background: rgba(0, 0, 0, .8);
}
<div class="my-button">
Click me
</div>
You just may need to adjust background image size and position, read more.
CSS only with pseudo-elements. Hope that works for you.
.col{
width:50%;
display:block;
}
.img-panel{
position:relative;
height: 200px;
background-image: url('https://placeimg.com/640/480/any');
background-size:cover;
color:white;
}
.img-panel:after{
content:"";
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
transition:0.2s;
}
.img-panel:hover:after{
background:rgba(0,0,0,0.5) ;
}
.img-panel:active:after{
background:rgba(0,0,0,0.8) ;
}
<div class="col col-md-4">
<div class="img-panel translucent-overlay-light">
Hello
</div>
</div>
As I understood, you need something like that, please check this. It's pure CSS solution.
.btn-wrap {
.btn-wrap__input {
width: 100%;
height: 300px;
position: absolute;
z-index: 3;
margin: 0;
opacity: 0;
&:checked {
+ .btn-wrap__overlay {
opacity: .7;
}
&:hover {
+ .btn-wrap__overlay {
opacity: .7;
}
}
}
&:hover {
+ .btn-wrap__overlay {
opacity: .5;
}
}
}
.btn-wrap__button {
height: 300px;
width: 100%;
}
.btn-wrap__back {
position: absolute;
height: 300px;
width: 100%;
z-index: 1;
color: white;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7ixV_dB22rsPTNwbph6uHl62bSSNHK_TQLw1gMOPmoWErkRdK');
}
.btn-wrap__overlay {
background: black;
opacity: 0;
height: 300px;
position: absolute;
z-index: 2;
width: 100%;
}
}
<div class="col-md-4 btn-wrap">
<div class='btn-wrap__button'>
<input type='checkbox' class='btn-wrap__input'>
<div class="btn-wrap__overlay"></div>
<div class="btn-wrap__back"></div>
</div>
</div>
Code can be found there http://codepen.io/kongakong/pen/wMQrBR
Javascript:
$(document).ready(function () {
init();
});
function init() {
$('#test').on('click', function () {
$('.answer').animate({width: "hide"}, 1000, 'swing');
});
}
css:
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
html
<div class="contrainer">
<div>
<input id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
Here is a screenshot of the page before animation starts
When the button is clicked, the animation is executed as expected. I expect div's of css class answer-new stay visible. However at the end all the div disappeared.
I tried to use '0' instead of 'hidden'. In this case, the text of div answer stays visible. Not completely hidden.
Why this behaviour?
It is because your .row div have overflow-x: hidden; and when .answer div width become hidden then there no any div other than .answer-new.
And .answer-new is position:absolute So, it count not width/height. And it will hide all element overflow the .row.
To. Make it working add padding to .row So, it count some spacing.
like her in example i add padding: 25px 0;. and i have give top value to absolute div. top: 0; to give it's position.
And added margin: -25px 0; to .answer to display it proper from top as padding added to parent div.
CSS:
.row {
position: relative;
overflow-x: hidden;
padding: 25px 0;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
margin: -25px 0;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
top:0;
}
Working Fiddle
That is because your container div .row has no dimension (width nor height) of its own, and the other child div .answer-row has absolute positioning and only width dimension. So when the child div .answer gets hidden, the parent loses its height dimension, and effectively becomes invisible.
If you give the parent div .row a height, when the child div .answer gets hidden, the parent stays visible. Consequently the other child div .answer-row stays visible, considering its style.
See this fiddle wherein I added height to .row.
While I can't exactly explain the behavior this myself, I took the liberty of limiting the width to 1 px and removing the opacity that fixed the issue
function init() {
$('#test').on('click', function() {
$('.answer').animate({
width: '1px',
opacity: 0
}, 2000, "swing");
});
}
Updated Fork
hope this will help to you,I used online jquery.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
</style>
<body>
<div class="container">
<div>
<input class="btn btn-default" id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$(".answer").animate({width:0,opacity:0},1000);
});
});
</script>
</body>
</html>
IMHO I don't like using jquery/js to animate things, I would do it with css classes
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
transition: 0.5s;
overflow: hidden;
}
.answer.minimized{
width: 0px;
}
in your js
$('#test').on('click', function () {
$('.answer').addClass('minimized');
});
Here's the demo
I am using this fork code to display text on mouseover of an image.
http://codepen.io/anon/pen/hxqoe
HTML
<img src="http://placekitten.com/150" alt="some text" />
<img src="http://placekitten.com/150" alt="more text" />
<img src="http://placekitten.com/150" alt="third text" />
<div id="text"></div>
CSS
div {
display: none;
position: absolute;
}
img:hover + div {
display: block;
}
JQUERY
$('img').hover(function() {
$('div').html($(this).attr('alt')).fadeIn(200);
}, function() {
$('div').html('');
});
I am looking for the div text to be displayed inside each image instead of a stationary div.
Any ideas?
You actually don't need jQuery for this. It can easily be achieved with pure CSS.
In this example, I use the :after pseudo element to add the content from the alt attribute of the parent div. You can add whatever styling you want..
jsFiddle here - Updated to include a fade
HTML - pretty simple
<div alt="...">
<img src="..."/>
</div>
CSS
div {
position: relative;
display: inline-block;
}
div:after {
content: attr(alt);
height: 100%;
background: rgba(0, 0, 0, .5);
border: 10px solid red;
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
box-sizing: border-box;
text-align: center;
color: white;
padding: 12px;
font-size: 20px;
opacity: 0;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
}
div:hover:after {
opacity: 1;
}
Change your javascript to this:
$('img').hover(function() {
$('div').html($(this).attr('alt')).fadeIn(200);
$('div').css('left',$(this).offset().left + 'px');
$('div').css('top',$(this).offset().top + $(this).height() - 20 + 'px');
}, function() {
$('div').html('');
});
And that should do the trick.
I would wrap your images in some kind of wrapper and then use CSS for the hover effect (DEMO).
HTML:
<div class="img-wrapper">
<img src="http://placekitten.com/150" alt="some text 1" />
<div class="img-desc">some text 1</div>
</div>
CSS:
.img-wrapper {
position: relative;
display: inline;
}
.img-desc {
display: none;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: #FFF;
opacity: 0.6;
padding: 5px;
}
.img-wrapper:hover .img-desc{
display: block;
}
I added an alternative solution with additional css transition to the demo.
To get a transition just control the visibility with opacity:
.img-desc {
/*...*/
opacity: 0;
/*...*/
}
.img-wrapper:hover .img-desc{
opacity: 0.6;
transition: opacity 0.4s ease-in;
}