I'd like to change the background image of the body (or my section) on link hover as in this example:
http://www.passion-pictures.com/paris/directors/
Is there any way to do it without using JS.
I only know how to code HTML/CSS
EDIT :
When I Hover on the first link (Michelle) it changes the background of my section as expected.
But when I hover on the second link (Franck) the top of my second link background begins under my first link. So the top of my default background is still visible.
My links are displayed vertically
It is possible but there will be too much HTML code and CSS workarounds.
if you still want in CSS only then refer this code - change css background on hover
HTML code
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background><div>
</div>
</div>
CSS Code
div.link > a {
displya: inline-block !important;
position: relative !important;
z-index: 5;
}
.bg1:hover + .background {
background: red;
}
.bg2:hover + .background {
background: green;
}
.background {
background: transparent;
position: absolute;
width:100%;
height: 100%;
top:0;
left: 0;
}
This will give you an idea of implementation but I'll suggest you go with JS that is a much better way of doing it.
Hope this might help you
HTML
<div class="container">
bg1
</div>
CSS
.bg1:hover::after {
content: "";
position: fixed;
top: 0;
left: 0;
background: red;
width: 100%;
height: 100%;
z-index: -1; /* index would get changed based on your need */
}
Related
I have come across a fragment of CSS that works. I would like to understand why it works for my own edification. My question is a general one on the sematics of using :after in CSS.
The Wordpress Twenty Nineteen theme puts a dark filter on feature images in order to make the (white) header text more readable.
I was searching for a way to remove the dark filter on specific feature images.
I found a post that suggests this css:
.site-header.featured-image:after {
background: none;
}
It works a treat!
Using Firefox inspector I see that .site-header & .featured-image are both classes of an enclosing <header> element. Layout is flex.
I'm trying to get my head round this usage of :after. My search of :after suggests that is a way of adding 'content' after an element. This example add no content.. instead it seems to be modifying/overriding an existing property.
If I remove ':after' it stops working, so It's definitely necessary.
Can any kind expert explain what is going on here and/or point me to a spec that explains it?
Thank you
What it actually appear to be seeing is specificity.
What :after does is add an element after the last child or content of the element that :after is applied to. See: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Here is a rough example
.featured-image {
position:relative;
padding:5px;
}
.featured-image > p {
position: relative;
z-index:10;
}
.featured-image:after {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid black;
background-color: #CCC;
z-index:1;
}
.site-header.featured-image:after {
background: none;
}
<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>
As .site-header.featured-image:after is more specific than .featured-image:after, .site-header.featured-image:after takes preference for any conflicting styles.
With ::after and ::before you can add html elements or at least something that mimics the functionality of an html element.
::before will be placed before all the elements inside the element and ::after would be the last element.
As an example, Say we already have this markup,
<div class="some-div">
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
</div>
If we add the following css,
.some-div::after,
.some-div::before {
content: "";
display: block;
}
It'll result in this markup,
<div class="some-div">
::before
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
::after
</div>
Now, I'm guessing that your Wordpress theme adds an after element with a background-color of some value that overlays the image. And by setting the background of that ::after element to none you overwrite those styles and get rid of the overlay.
This snippet further elaborates what happens in the theme.
.some-div {
width: 20rem;
height: 20rem;
}
.img {
position: relative;
background-color: orangered;
width: 100%;
height: 100%;
}
.some-div:hover .img::after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
<div class="some-div">
<div class="img"></div>
<div>
I've broke my head trying to solve my problem but unfortunately I still didn't find the correct solution.
All I want is to have the white background to the left of the Column#1 and the grey background to the right of the Column#2.
But I can't find the needed attribute in the Column options (and I'm not sure if there are any.
I've attached the hand draw of what I want to do.
Thanks guys, you're the best.
Follow these steps:
Set the background of the section as Gradient.
Select White as 1st color
Select Gray as your 2nd color
Set Gradient type = Linear
Set Angel to 90
Now Adjust the Location as per your liking (15+ recommended)
Click the link below to see the result I have got.
You will see something like this
you can achieve this pretty easily by using a pseudo-element for the grey background. On your body set a white background.
body {
background: #fff;
}
main {
position: relative;
height: 250px;
}
main::after {
content: '';
background: grey;
position: absolute;
width: 35%;
height: 100%;
right: 0;
top: 0;
}
main .container {
z-index: 1;
position: relative;
}
<body>
<header>
</header>
<main>
<div class="container">
<div class="column1">
</div>
<div class="column2">
</div>
</div>
</main>
<footer>
</footer>
</body>
Okay, so I'm building a WordPress site and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/
The issue I am having is that I am using mix-blend-mode for one of my div containers to make use a 'lighten' blend on the background.
It works perfectly, but the issue I am having is that unfortunately the child elements inside the container (i.e. the text) are also inheriting the blend mode, and therefore it's making my text 'blend' as well, which isn't what I want (I want the text to have NO blend mode).
Anyways, you can see the code I am using below:
#category-intro-text {
padding: 0.625em 0.938em;
mix-blend-mode: lighten;
background-color: rgba(220, 235, 255, 0.8); repeat;
}
I tried applying something like 'mix-blend-mode: none;' to the text, but that doesn't work.
I've searched Google for an answer to this pretty extensively, but alas, there isn't much on this topic (if anything at all).
I realise you asked this a while ago but I've been playing with the same issue today and managed to fix it like this.
Wrap the content inside the #category-intro-text div with another div that is positioned relatively. Ultimately, you'll want to add the style to your css and not inline as I've done here.
<div id="category-intro-text">
<div style="position: relative;">
<h1>Power Line Markers</h1>
Etc. Etc.
</div>
</div>
Then remove the background colour and blending information you've got in the stylesheet for the #category-intro-text div. You should end up with...
#category-intro-text {
padding: 0.625em 0.938em;
position: relative;
}
Finally, use a ::before pseudo element to add the blended layer.
#category-intro-text::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(220, 235, 255,0.8);
mix-blend-mode: lighten;
}
Hopefully that will do it. It is working perfectly for me with a multiply layer.
EDIT: Here is a Fiddle forked from the previous answer.
I thought I had it worked out with the isolation property, but no. I didn't have much luck researching a solution for this issue either.
I suppose you could use this old trick: http://jsfiddle.net/cwdtqma7/
HTML:
<div class="intro-wrap">
<div class="intro-background"></div>
<div class="intro-content">
<h1>Hello</h1>
<p>Welcome to the thing.</p>
</div>
</div>
CSS:
body {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat;
background-size: 800px;
font-family: sans-serif;
}
.intro-wrap {
position: relative;
}
.intro-background {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png');
mix-blend-mode: lighten;
padding: 32px;
width: 300px;
height: 300px;
}
.intro-content {
position: absolute;
top: 0;
left: 32px;
}
Why use mix-blend-mode when there's background-blend-mode(maybe you have already tried that!) for that purpose. Actually mix-blend-modes blends the element it is applied on with everything beneath it. On the other hand background-blend-mode applied on a background blends only with the the background that is beneath it.
You can do this-
.outer-wrapper {
background: url(<url>), #fb3;
background-blend-mode: exclusion;
padding: 2em 4em;
}
.inner-text {
/**styling of you text***/
}
How to use mix-blend-mode, but not have it affect child elements?
Building upon #shanem's answer I found this solution
function change(id){
document.querySelector(id).style.backgroundColor="violet";
}
.group{
height:10rem;
width:10rem;
position:absolute;
visibility: hidden;
}
.group::before{
content:"";
visibility: visible;
position:absolute;
height:100%;
width:100%;
background-color:inherit;
mix-blend-mode:multiply;
z-index:-1;
}
.btn{
background-color:red;
color:white;
visibility: visible;
padding:0.5rem;
}
<div id="g1" class="group" style="background-color:cyan;">
<input type="button" class="btn" value="change" onclick="change('#g1')"/>
</div>
<div id="g2" class="group" style="margin:1.5rem;background-color:yellow">
<input type="button" class="btn" value="change" onclick="change('#g2')"/>
</div>
The best part is that you can directly change the background-color using javascript.
The only caveat (if you'd want to call it that) is that every child element must set visibility: visible;
Using slick: http://kenwheeler.github.io/slick/
HTML
<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
</div>
CSS
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
Jsfiddle Demo
Tried to override, but the prev and next buttons stay stuck inside the carousel. Wanted to replace the css with button images and the buttons should be outside the carousel, just like the example on slick website. Couldn't figure where I went wrong.
Help appreciated!
UPDATE : $('.carsoule').slickNext(); won't work anymore.
Use $('.carsoule').slick("slickNext"); instead.
https://github.com/kenwheeler/slick/issues/1613
Looking at the css that this plugin uses, I noticed the parent has overflow:hidden applied to it, so your arrows wont show beyond the parents container.
You can mess with adding a extra overflow !important rule to the container, however, I've looked over at some methods that you can use to trigger next/prev slide, and turns out that you can call on your carousel to change slide, when clicked on a certain class/id outside of the carousel container.
So basically, after your carousel(or anywhere on the page if it helps you out), add two div/button/a/whatever tags, and add either a class or id to call upon the slider to change its slide using: slickNext() or slickPrev()
You can wrap everything in a master container, your carousel and those two extra tags and style them the way you want.
Check out the demo here, and the extra js/markup used bellow:
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('.carsoule').slickNext();
});
$('.prev-button-slick').click(function(){
$('.carsoule').slickPrev();
});
UPDATE 2
If you want to keep your markup, and not add any extra stuff, you can either remove the inline overflow: hidden rule from the container, or via css with overflow: visible !important, and set those 2 arrows to position absolute, and work you way from there.
Check out the demo here and the css bellow:
/*extra stuff*/
.carsoule{
overflow: visible !important;
}
.slick-prev, .slick-next {
position: absolute;
background: red;
}
<div class='next-button-slick'>
next please
</div>
<div class='prev-button-slick'>
prev please
</div>
$('.next-button-slick').click(function(){
$('#portfolio-carousel').slick("slickNext");
});
$('.prev-button-slick').click(function(){
$('#portfolio-carousel').slick("slickPrev");
});
This should solve your issue,
CSS
body {
background: #d7d7d7;
}
.carsoule {
background: yellow;
margin: 0 auto;
overflow: visible;
width: 250px;
}
.slick-prev,
.slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
HTML
<div class="carsoule">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
</div>
</div>
The carsoule had overflow:hidden, so if you positioned it outside it was hidden.
The problem is the hover. Just add the block of code below to it and you'll be just fine.
.slick-next:hover,
.slick-prev:hover {
background-color: red;
color: white;
}
See working example here
You missed out the important slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css. I added this file and meddled with your codes and came up with this solution:
HTML
Re-styling your wrapper to include .slider class with proper margins:
class="carsoule slider"
Modified CSS
.slick-prev:before, .slick-next:before {
color:red;
}
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/plan to add button image/
}
.slick-next{
right: -80px;
/plan to add button image/
}
.slider {
margin:0 80px 0 80px;
width: auto;
}
I am trying to apply a background image hover effect on each row in my css table but need it to appear to the left of the containing element.
View image http://www.weiserwebworld.com/images/view.gif
Any ideas?
JS:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
CSS:
#container {
width: 660px;
margin: 20px auto;
}
div .table {
display: table;
border: 1px red solid;
}
div .table-row {
display: table-row;
}
div .table-cell {
display: table-cell;
width: 145px;
padding: 10px;
vertical-align: top;
}
.highlight {
cursor: pointer;
background-image: url('click-to-view.png');
background-position: 0 center;
background-repeat: no-repeat;
}
HTML:
<div id="container">
<div class="table">
<div class="table-row">
<div class="table-cell">Ralph Kramden</div>
<div class="table-cell">Truck Driver</div>
<div class="table-cell">8/17/2010</div>
<div class="table-cell">N/A</div>
</div>
<div class="table-row">
<div class="table-cell">Ralph Kramden</div>
<div class="table-cell">Truck Driver</div>
<div class="table-cell">8/17/2010</div>
<div class="table-cell">N/A</div>
</div>
</div>
</div>
First, throw away this:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
It is an abomination.
Then change the CSS selector .highlight to .table-row:hover. As you clearly don't care about IE6 (where :hover only worked on a elements), there's nothing wrong with using :hover.
Now to the rest of the problem.
The technique that I would use for this is the before or after pseudo-element. Something like this:
.table-row {
position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */
}
.table-row:hover:after {
position: absolute;
left: -80px; /* Adjust as desired */
content: url(click-to-view.png); /* This makes it an image */
}
There's plenty of tweaking that can be done with this, but that's the general idea. No demo on jsfiddle as I can't be bothered doing the table structure or getting an image for it.
You can do this in pure CSS.
This is quick and dirty, you'll have to tweak it to how you want, but the general idea is:
If you give your row an id () you can add a CSS styles like this:
.overlay {
display: none;
position: absolute;
left: -30px; //makes it appear left of box, even though it's technically "in" box.
}
#table-row1:hover .overlay {
display; block; //Causes div to appear.
}
Now, simply add with the image you want, that will appear as you roll over the row.
Note that the class=overlay div MUST be placed INSIDE of the id=table-row1 div or the hover-appear will not work!
I would also recommend redoing this using tags with the same :hover approach, as your current method of divs with table properties could get unwieldy very fast.
You need to put your image in a DIV, then position the DIV relative to the row. Backgrounds cannot go outside the boundary of their container.