Hover Colour making Headers unreadable - html

I'm trying to achieve an effect like on this website, http://www.trask-industries.com/#/media, when the content is hovered over it a yellow colour consumes it and the colour of the header changes. When I attempted to re-create this effect my headers become unreadable. jsfiddle.net/m8Z25
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
background-color: white;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}
h1:hover
{
color: black;
}
h2
{
color: red;
position:absolute;
bottom: -10;
padding-left: 30;
}
h1
{
color: black;
}

it is not 100% clear what you are trying to achieve here...
From what I can tell. it becomes nearly un-readable because you are adding opacity to the content container. This affects all content (including the background) so everything get faded.
It depends what you have behind the content containers (your sites background).
The site you demo-ed does not use the opacity to change anything. I imagine it just changes the background colour from a lighter purple to darker purple
try removing the opacity:0.30; and updating the background/text colours instead.
see This jsFiddle for an example of just changing colours vs using opacity...

Related

Make Nav-Bar text change color when scrolling with CSS

I have a header that is transparent but becomes solid when scrolling, the problem arises because the headers Nav-Bar menu text color does not change along with the transparency of the header, theres multiple reasons why one would need this to happen.
So I am trying to make the Nav-Bar menu text change color when scrolling and i was wondering i could repurpose the CSS for the transparency of the header to fit this new purpose, i just don't know how.
The following CSS is for changing the transparency when scrolling:
selector.elementor-sticky--effects{
background-color: rgba(255,255,255,255)!important
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}
I need the above CSS to be repurposed to work so it changes color of the Nav-Bar instead of the background-color for transparency.
Here is the CSS for just setting the color of the Nav-Bar:
.elementor-nav-menu a {
color: #001C38 !important;
}
I figured it out, the scrolling effect were a part of Elementors plugin for wordpress.
the nav bar items are links therefore i could just target them with this
selector.elementor-sticky
--effects a,selector
.elementor-sticky--effects i{
color: #001C38 !important;
and have the same effect by to it as the other scrolling effect because of --effects

Delaying a second css property until after the first transition is complete

I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)

Hover state in table with border shifting link only in Firefox

I know this type of question has been asked in some way shape or form on here but i cannot get this to work no matter what. Screenshot included as well the CSS. When you hover on the row, the left border highlights it. It's moving the link over 1px. I tried compensating with negative margin but no luck ( just to test it). It's only Firefox where this is happening.
%zebra-row {
transition: background-color .1s ease-out;
background-clip:padding-box;
&:nth-child(odd ) {
background-color: $alabaster;
}
&:hover {
background-color: $gallery;
border-left:2px solid $aqua-forest;
}
}
It is because the border is being applied and moving it over (as I'm sure you've assumed).
To get around this, you'll want to have a default border present but make it transparent. On the hover, you'll simply color the border.
%zebra-row {
transition: background-color .1s ease-out;
background-clip:padding-box;
border-left:2px solid transparent; /* Set the transparent border */
&:nth-child(odd ) {
background-color: $alabaster;
}
&:hover {
background-color: $gallery;
border-left-color:$aqua-forest; /* Color it on hover */
}
}
This prevents the "jump" you were talking about because the border is, essentially, always there.

What is causing this CSS Transition delay, specifically with colours in Chrome?

Using CSS transitions on most properties runs as expected, except this issue I am having with colours.
I have set up a demonstration pen here.
When transitions are instructed to change the color property, they all queue after each other instead of happening all at once.
This seems limited to webkit as IE and Firefox work as expected.
#change {
color: green;
transition: color 200ms linear;
}
.changed {
color: red;
}
I think it's because color is inherited property, and you use * selector for transition. You should set transition: color only to element you change color, for example (http://codepen.io/sergdenisov/pen/QbjjjP):
#container {
padding: 0;
transition: color 500ms;
}
#container * {
transition: margin 500ms;
}

How do I add a color overlay on wordpress images/homepage - or an opacity drop? (before-hover)

How do I add an color overlay or maybe an opacity drop the the images on a wordpress homepage - they have a color overlay on hover - but I want them to be darker in the picture color, as I am trying to go with a dark theme.
As you can see on the left one - I have toned it down a little in photoshop, whereas the right image is how they normally look.
Is there a way to do this rather then possibly toning down every image via photoshop before I upload?
You can wrap the image in a container with the same size and change the opacity of the image, while the wrapper has a dark background color. It might be problematic in IE8.
div {
width: 400px;
height: 200px;
background-color: #1b1b1b;
}
img {
opacity: 0.5;
transition: opacity 0.25s;
}
img:hover {
opacity: 1;
}
<div>
<img src="http://lorempixel.com/400/200/" alt="img"/>
</div>