Trying to have my back and next buttons have an animated 'background' created by a :before element when hovered over. The back and next buttons are located at the sides of the page and are the text of the posts so I don't have full control over their content. I want the background block to stretch from one side to the other (right to left on next, left to right on previous) behind the text.
I want the background block (:before element) to be the full height and width of the text it is behind (text has padding)
css (I left out the transition: css until I can get it working properly.)
#nav-BN {
position: relative;
display: block;
padding: 0;
margin: 50px 0;
}
.nav-previous, .nav-next {
display: block;
position: absolute;
z-index: 1;
}
.nav-previous { left: 0; }
.nav-next { right: 0; }
.nav-previous a, .nav-next a {
display: block;
position: relative;
z-index: 2;
text-align: center;
color: #333;
padding: 10px 20px;
}
.nav-previous a:before, .nav-next a:before {
display: inline-block;
position: absolute;
content: '';
left: 0; top: 0;
height: 100%; width: 0%;
background-color: #000;
}
.nav-previous a:hover:before, .nav-next a:hover:before { width: 100%; }
.nav-previous:before { transform-origin: left center; }
.nav-next:before { transform-origin: right center; }
<div id="nav-BN">
<div class="nav-previous">
<a>link</a>
</div>
<div class="nav-next">
<a>link</a>
</div>
</div>
Issues I've encountered is using 100% width, makes it full width of screen not of the containing div. text jumping around page when hovered, etc
I have used this before and I think it is exactly what you are looking for:
http://ianlunn.github.io/Hover/
Use the example hvr-shutter-out-horizontal :
<a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a>
but change the css for .hvr-shutter-out-horizontal to background: transparent;
https://cssanimation.rocks/pseudo-elements/
Hope this helps. Not sure exactly what you are trying to do-
I think you should try
flex box
Related
Codepen link: https://codepen.io/lolcatBH/pen/OJbgLyd
I have the following html:
<div id="page">
<div class="overlay"></div>
<div class="click">SHOW POPUP</div>
<div class="popup">
<h1>Korean language</h1>
<button class ="close">X</button>
<div class="desc">Korean (North Korean: 조선말/朝鮮말, chosŏnmal; South Korean: 한국어/韓國語, hangugeo) is an East Asian language spoken by about 77 million people.</div>
</div>
</div>
And CSS:
#page {
position: absolute;
top: 50%;
left: 25%;
}
.popup {
width: 300px;
height: 300px;
border: 1px solid black;
z-index: 1;
position: absolute;
top: -10%;
transform: scale(0);
padding: 20px;
}
#page .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.7);
z-index: 1;
display: none;
}
#page.active .overlay {
display: block;
}
.popup.active {
transform: scale(1);
background-color: white;
}
.close {
position: absolute;
right: 0%;
top: 0%;
color: white;
background: black;
border-radius: 50%;
}
.click {
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
z-index: 0;
cursor: pointer;
}
h1, desc {
text-align: center;
}
JS:
const click = document.querySelector('.click');
const x = document.querySelector('.close');
const page = document.querySelector('#page');
const popup = document.querySelector('.popup');
const showPopup = () => {
page.classList.toggle('active');
popup.classList.add('active');
}
const hidePopup = () => {
page.classList.toggle('active');
popup.classList.remove('active');
}
click.addEventListener('click', showPopup);
x.addEventListener('click', hidePopup);
At first, what I tried to do is instead of creating a separate overlay div, I was going to put a background color on the #page element. However, in effect, the background only applies to the button element (.click). I don't actually understand why in this case, since the background-color doesn't seem to affect the .popup element.
Imgur: https://imgur.com/a/UEgXSlY
So my question is, why does the #page element not cover all of its children's width and height? In this case, I thought it would have cover the whole page. I've also tried putting width: 100vw and height:100vh but it in turn only applied the dimensions to the button.
Imgur: https://imgur.com/a/QOMlnTs
The reason is that most of your elements have position set to absolute or fixed, which makes them completely (fixed) or partly (absolute) independent from their parent, i.e. there is no space of its own reserved for them, therefore they typically overlap other elements.
So the parent doesn't span or cover them, but only those elements which don't have a set position or which have position: relative or static.
I want to add some pizzazz to some banners... my banners are simply an h1 element with a background color property that stretches the legth of the containing element.
Here is my CSS:
.banner {
position: relative;
z-index: 1000;
padding: 20px;
}
.banner-blue {
background-color: #93DEFF;
color: #222222;
}
.banner-yellow {
background-color: #FFF072;
color: #777777;
}
.banner-red {
background-color: #FF356B;
color: white;
}
And I would apply it like this:
<h1 class="banner banner-yellow">I'm a banner!</h1>
My problem:
I want to overlay a copy of the banner background but change the color and rotate it slightly on the z-axis to get an effect like this.
However I can't work out how to do that using the ::before (or is it ::after) psuedo-elements to do that... here is what I have tried:
.banner-red::before {
display: block;
position: absolute;
padding: 20px;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(3deg);
width: 100%;
margin-left: -30px;
}
Here is a codepen of it running: not looking too good: https://codepen.io/jethazelhurst/pen/JyKqRB
Just rotate your box in the opposite direction: transform: rotateZ(-3deg);
You can set the top and left value in order to place your rotated box correctly.
.banner-red::before {
display: block;
position: absolute;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(-3deg);
width: 102%;
height: 97px;
margin-left: -30px;
top: 2px;
}
Of course you can change the colors: your horizontal box is #91c6ff and the rotated one is #91c6ff. Also, they are transparent.
Here's a fork of your project: https://codepen.io/anon/pen/zdBVGe
And with the colors:
Make a element with another child element for text, span for example. Then you can set z-index on span so that text is above pseudo element.
div {
background: #91C6FF;
padding: 25px;
margin: 40px;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(135, 171, 255, 0.7);
transform: rotate(-4deg);
}
span {
position: relative;
z-index: 2;
font-size: 30px;
}
<div><span>Lorem ipsum dolor.</span></div>
I know how to put text on hover on an image if the height and the width is fixed. but I have a responsive slider (owl-slider) and want to add link (easy - yeah.) and a blue overlay with white text in it and a simple fading/sliding transition from the overlay.
The problem is: every item changes its height and width on resizing. I could write several media queries, but I'm quite sure there must be a simpler solution to that problem.
I have a very simple markup:
<div>
<a href="#">
<img src="http://placehold.it/360x100">
<div class="overlay">Click here for more Infomartion</div>
</a>
</div>
Normally I would go for pure css method with setting height and width from .overlay to the image size and set visibility on hover. But.. that won't work, because the width & height will differ from viewport to viewport. So, what would you suggest?
The trick involves setting position: relative to the parent container .image-container which contains the image. Using display: inline-block will force the parent container to shrink-to-fit the image.
You then apply position:absolute to the child container (overlay) .hover-text and set all the offsets (left, right, top and bottom) to zero, which will force the overlay to match the size of the image.
If you want to vertically center the text, you need to add two nested blocks.
One way of doing it is to repurpose the a element using display: table with width and height of 100%, and then apply display: table-cell to the nested div with vertical-align: middle. This will center the text vertically if so desired.
I added a transition effect to demonstrate how to set it up. You can
adjust the details as you like for duration and transition type.
Ref: http://www.w3.org/TR/css3-transitions/
You could also do a translation using a CSS transform, which is also feasible since the modern browsers support transforms (especially in 2D).
.image-container {
position: relative;
display: inline-block;
}
.image-container .hover-text {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 255, 0.5);
opacity: 0;
transition: opacity;
}
.hover-text a {
display: table;
height: 100%;
width: 100%;
text-decoration: none;
}
.hover-text a div {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3.0em;
color: white;
}
.image-container img {
vertical-align: top; /* fixes white space due to baseline alignment */
}
.image-container:hover .hover-text {
opacity: 1;
transition-duration: 1s;
transition-timing-function: linear;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
<a href="#">
<div>Text on hover</div>
</a>
</div>
</div>
Try this, it doesn't care about the image size
.image-container{
position: relative;
display: inline-block;
}
.image-container .hover-text{
position: absolute;
top: 33%;
width: 100%;
text-align: center;
visibility: hidden;
}
.image-container:hover .hover-text{
visibility: visible;
}
/* styling */
.hover-text{
font-family: sans-serif;
color: white;
background: rgba(0,0,0,0.3);
text-shadow: 1px 1px 1px black;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.hover-text a{
color: white;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
Text on hover Link
</div>
</div>
Skipped the transition stuff, but is this what you're requesting?
div {
position: relative;
}
img {
width: 100%;
}
.overlay {
background: blue;
color: white;
display: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
}
a:hover .overlay {
display: block;
}
JSFIDDLE: http://jsfiddle.net/volzy/hLpLabaz/1/
For full size overlay do:
.overlay {
height: 100%;
top: 0;
}
Hey guys I am relatively very new to HTML and CSS and have the following difficulty I made a small input box and I am trying to add a few CSS transforms and create a small animation on the input box. Code below:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.input {
position: relative;
display: inline-block;
max-width: 350px;
width: 100%;
}
.akira-input {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
background: transparent;
z-index: 10;
}
.akira-label {
display: block;
height: 100%;
padding: 0;
width: 100%;
background: #696a6e;
color: #cc6055;
cursor: text;
}
.akira-label:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: red;
-webkit-transform: scale3d(0.97, 0.50, 1);
transform: scale3d(0.97, 0.50, 1);
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.label-content {
color: #000;
font-size: 1.3em;
text-transform: uppercase;
position: relative;
display: block;
text-align: center;
padding: 1.6em 0;
width: 100%;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
<span class="input">
<input type="text" id="akira" class="akira-input">
<label for="akira" class="akira-label">
<span class="label-content">Akira</span>
</label>
</span>
My difficulty is, if I apply position:relative to <span class="label-content">Akira</span>, it shows, if I remove position:relative , that element disappears from view.
My question is why is position:relative functioning like z-index?
Can somebody elaborate ??
EDIT :: refering to Justinas answer , i have the folloing question ,
Does applying position:relative places an element
higher in the stack , even without applying z-index ??
z-index is only working for non-static elements, so when you remove position: relative than element becomes statically positioned and moves below higher index elements (disappears from view). When you add position: relative to element, than z-index will take effect and so element appears in your view.
Also position and z-index is two different properties
position - how element is positioned according to other elements on page. Default to static
z-index - how high element is in z-axis (z-index: 2 - is behind element with z-index: 10). Default to 5
.wrapper {
position: relative;
}
#static {
position: static;
z-index: 999;
width: 400px;
height: 150px;
background-color: #ddd;
padding: 3px;
}
#top-1 {
position: absolute;
z-index: 10;
left: 8px;
top: 45px;
width: 330px;
height: 80px;
background-color: #888;
padding: 3px;
}
#relative {
position: relative;
z-index: 11;
background-color: #88a;
width: 330px;
height: 80px;
padding: 3px;
top: 30px;
left: 8px;
}
#top-2 {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 400px;
height: 150px;
background-color: #dda;
padding: 3px;
}
<div class='wrapper'>
<div id="static">
I'm static, so behind #top-1, but have z-index higher than #top-1... Means z-index has no effect.
<br/>Text that is not visible, because behind #top-1 element
</div>
<div id='top-1'>
I'm above #static, because i have non-static position, so my z-index has effect.
</div>
</div>
<hr/>
<div class='wrapper'>
<div id="relative">
I'm relative and above #top-2, because my z-index higher than #top-2... Means z-index has taken effect.
</div>
<div id='top-2'>
I'm below #relative, because i have lover z-index.
<br/>Text that is not visible, because behind #top-1 element
</div>
</div>
z-index only works on positioned elements so position:absolute, position:relative or position:fixed
It does not behave like a z-index, because z-index specifies an ordering rule, but not the way how the element is displayed.
position: relative; says to go to the relative mode where it can compete the absolutely positioned elements.
Your problem here is that :before pseudo-element is a hierarchical sibling of span, and it takes the whole available parent width. So it fully covers a static span element.
When you make it relative, it becomes shown because when z-index is not specified for both non-static elements they are shown in the same order like they are placed in HTML (so element which is defined in HTML later is always on top).
Your structure is:
label
:before
span
so the span becomes visible.
I am trying to create a grid style portfolio page in which the title highlights when hovered over. I would like also a background color to show over the image as well. I have created both of these but can't figure out how to have them happen at the same time. Below is the HTML and CSS as well as the link to see what I mean in action.
.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
.home_blog_box img { width: 287px; height: 201px; }
.home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
.home_blog_box h3:hover {background-color: #777777; opacity:.85;}
.home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
.home_blog_box h3 a:hover {opacity:1}
<div class="home_blog_box">
<?php } ?>
<?php the_post_thumbnail('featured-blog'); ?>
<h3><?php the_title(); ?></h3>
</div><!--//home_blog_box-->
Thanks!
You can do this nicely with the :after or :before pseudo elements: http://jsfiddle.net/TpfA8/
example:
<div class="image-box">
<img src="http://placehold.it/200x150" />
<p>title</p>
</div>
and relevant css:
.image-box {
position: relative;
overflow: hidden;
width: 200px;
}
.image-box:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200,100,100, 0.5);
}
.image-box p {
display: none;
}
.image-box:hover p {
display: block;
position: absolute;
top: 10px;
left; 10px;
}
Using CSS-generated content, you're creating a box around around the content of '' (nothing) but this element still adheres to the box model (sort of) so it can get things like height, width, position, etc.
Make sure to specify width for your image container so you can use the overflow: hidden; property.