I have a div with an image.
On hover, I want to make the image bigger and to display some text next to the div.
I want to show the text once the first transition (make the image bigger) has ended.
I've tried a lot of things but did not manage to find any solution, here is my last try :
.width-12 {
width: 100%;
height: 100%;
}
.change-hover {
width: 10%;
transition: all 1s;
float: left;
}
.show-hover {
display: none;
text-align: left;
opacity: 0;
transition: opacity 0s;
}
.discover-no-hover:hover .change-hover {
width: 24%;
float: left;
}
.discover-no-hover:hover .show-hover {
display: block;
opacity: 1;
transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
<div class="box small bkg-white">
<div class="feature-column medium mb-50 center hover-align">
<div class="iconcool">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg"
alt="" class="img-responsive change-hover">
</div>
<div class="show-hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
</div>
</div>
</div>
</div>
JSfiddle for those who don't like the snippet
How can I make the text appear only after the image stopped growing ? (Or after 1s, wich is the duration of the image growing)?
Thank you !
You have
.show-hover {
display: none;
text-align: left;
opacity: 0;
transition: opacity 0s; /* this*/
}
Just amend this to
transition: 0s opacity 1s;
.width-12 {
width: 100%;
height: 100%;
}
.change-hover {
width: 10%;
transition: all 1s;
float: left;
}
.show-hover {
display: block;
text-align: left;
opacity: 0;
transition: 0s opacity 1s;
}
.discover-no-hover:hover .change-hover {
width: 24%;
float: left;
}
.discover-no-hover:hover .show-hover {
display: block;
opacity: 1;
transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
<div class="box small bkg-white">
<div class="feature-column medium mb-50 center hover-align">
<div class="iconcool">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg" alt="" class="img-responsive change-hover">
</div>
<div class="show-hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis.
Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
</div>
</div>
</div>
</div>
Related
I'm having some trouble with an Accordion Dropdown snippet on codepen.
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide {
0% {
max-height: 0
}
100% {
max-height: 300px
}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I want to animate the dropdown's expansion. I want it to start from the top of the container. Now, it starts from the end of the padding. Doesn't look nice. I've delayed the animation 1s so you can tell what I mean
Here's a link to my pen: https://codepen.io/b3u/pen/RBbeWy. Thanks in advance!
Transition instead of animation, in this case, as it is simpler.
didn't touch the animation code, just created the transition effect.
Transition on max-height will not use GPU processing so be aware of possible performance issues on mobile devices (or old computers)
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i< other.length ; i++){
other[i].style.display = "none";
}
item.style.display = "block";
}
*{
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0}
100% {max-height: 300px}
}
p {
display: block;
max-height: 0;
overflow:hidden;
padding: 0;
transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
background-color: #E5FB8B;
color: #444;
text-align: justify;
position: relative;
z-index: 0;
box-sizing:border-box;
}
p.active{
padding: 2em 1em 1em 1em;
max-height: 1000px;
transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
}
nav{
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover{
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
Below an updated version of your code, the change was adding reset for padding at the top and bottom at the beginning of the animation. Hope this help.
All the best!
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0; padding-top: 0; padding-bottom: 0}
100% {max-height: 300px}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I'm trying to recreate this codepen transform:scale transition for a particular page on my site. It works fine on Firefox but it's not working as it should on either Chrome or Safari. On these platforms the image transforms okay but then snaps/jerks back after the allotted timescale (in this case one second) has elapsed. I'm led to believe this might be a common bug for this style rule but I've not been able to find a solution. I can't really change the images from <img> to a background-image structure at this stage.
I've recreated the issue with this code snippet -
/* Partners page */
.masonry {
/* Masonry container */
column-count: 5;
}
.brick img {
width: 100%;
height: 100%;
}
body {
font-family: 'Gotham-Light';
margin: 0;
background: #fff;
font-size: 25px;
}
.wrapper {
width: 80%;
margin: 3em auto;
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
vertical-align: bottom;
}
.brick {
display: inline-block;
margin: 0 0 1em;
width: 100%;
transition: transform 1s;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Image words / text hover effect */
.brick {
opacity: .99;
position: relative;
}
.wrapper .brick .details {
padding: 0px 20px 20px 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
opacity: 0;
transition: .7s ease;
background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
}
.wrapper .brick:hover {
-webkit-transform: scale(1.5);
position: relative;
z-index: 9;
}
.brick:hover .details {
opacity: 1;
}
.brick .details span {
opacity: 0;
top: 0;
/* 100px */
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.brick .details #title {
line-height: 1.5;
font-weight: 500;
font-size: 18px;
}
.brick .details #info {
line-height: 1.2;
font-weight: 500;
font-size: 20px;
}
.brick:focus:before,
.brick:focus span,
.brick:hover:before,
.brick:hover span {
opacity: 1;
}
.brick:focus:before,
.brick:hover:before {
top: 0;
/* 50% */
}
.brick:focus span,
.brick:hover span {
top: 0;
}
.brick:focus #title,
.brick:hover #title {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.brick:focus #info,
.brick:hover #info {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
/* ------------------------- */
<div class="wrapper">
<div class="masonry">
<div class="partner">
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509810535/Certo-120x72_hrw5eq.png" style="width: 180px; height: 120px;" class="partimg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
</div>
</div>
<div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg">
<div class="details">
<span id="info">Quisque vel felis lectus donec vitae dapibus magna, Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. </span>
</div>
</div>
</div>
</div>
Any assistance appreciated.
I'm working on a responsive horizontal accordion that have images with text overlays. What I want to do is have the titles on each image display on the left side of each image, so that the text will be displayed without the user having to hover over it, like this:
When the user hovers over the image, I'd like it to stay on the left side, and display the description. My issue is getting the title to display on the left side. I can see that it is animated on hover; it goes from -90deg to 0.
CSS/HTML:
.accordion {
width: 100%;
max-width: 2100px;
height: 350px;
overflow: hidden;
margin: 50px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 350px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div a h2 {
display: block;
overflow: auto;
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
background-color: rgba(255,255,255,.5);
width: 100%;
}
.accordion ul li div a {
display: block;
height: 350px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #000;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
position: relative;
z-index: 5;
overflow: fill;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
background-color: rgba(255,255,255,.5);
padding: 5px;
}
.accordion ul li div a h2 {
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: 60px;
}
.accordion ul li div a p {
top: 80px;
font-size: 14px;
height: 100px;
}
.accordion ul li:nth-child(1) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul li:nth-child(2) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul li:nth-child(3) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul li:nth-child(4) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul:hover li { width: 8%; }
.accordion ul:hover li:hover { width: 60%; }
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 600px) {
body { margin: 0; }
.accordion { height: auto; }
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
<div class="accordion w3-center">
<ul>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a> </div>
</li>
</ul>
</div>
Code pen:
http://codepen.io/xxdash/pen/pPrwBw
First, let me explain the using of a universal selector which is * in CSS matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector. Below is the example shows both are equivalent:
*.module {
display: block;
}
.module {
display: block;
}
In my opinion, it is not recommended to use the Universal in CSS unless you want to reset all the elements.
I have seen your code and reviewed and found a bit complex coding for the display method in descendants. For example, you can use adjacent sibling selector for your heading element as done in my code.
.accordion ul li div + h2 {
your declaration
}
I have removed the h2 element which was a child of an anchor element which is forcing to transform with the hover case. I have wrapped the h2 element with the span element and transformed its direction to a vertical position with negative positioning from the bottom and left as when rotating element at an angle, the edge of the element also rotated leaving a gap so we need to fix that with negative/position margins.
Here is the modified code.
Hope this is what you are looking for.
.accordion {
width: 100%;
max-width: 1000px;
height: 300px;
margin: 0 auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 300px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
position: relative;
}
.accordion ul li div span {
background-color: rgba(255, 0, 0, .5);
font-size: 20px;
line-height: 34px;
font-weight: 300;
position: absolute;
display: block;
width: 300px;
height: 30px;
-webkit-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
-moz-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
-ms-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
transform: rotate(-90deg) translateX(-50%) translateY(-150px);
left: 15px;
top: -15px;
white-space: nowrap;
z-index: 10000;
cursor: default !important;
}
.accordion h2 {
font-size: 20px;
margin: 0;
}
.accordion ul li div a {
display: block;
height: 300px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #000;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
position: relative;
z-index: 5;
overflow: fill;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
background-color: rgba(255, 255, 255, .5);
padding: 0px;
}
.accordion ul li div a p {
top: 0;
font-size: 14px;
}
.accordion ul li:nth-child(1) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul li:nth-child(2) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul li:nth-child(3) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul li:nth-child(4) {
background-image: url("http://placehold.it/1350x350");
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 60%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
<div class="accordion w3-center">
<ul>
<li>
<div><span><h2>HEADER With Longer Text</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
<li>
<div><span><h2>HEADER with longer text</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
<li>
<div><span><h2>HEADER</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
<li>
<div><span><h2>HEADER</h2></span>
<a href="#">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
a scelerisque purus accumsan sit amet.<br>
<button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
</a>
</div>
</li>
</ul>
</div>
so i'm confused as to why my footer section is hidden. I assume it is because the body is set to overflow: hidden, but it needs to be this way in order for the off-canvas menu to work. If I remove overflow: hidden on the body then the menu bar disappears when scrolling. I just don't understand why the footer section isn't showing since it is inside of the body element. Any ideas how to fix this problem?
Here is a JSFiddle:
https://jsfiddle.net/b18wmdzg/
Html
<body>
<div class="container">
<div class="menu-wrap">
<nav class="menu-top">
</nav>
<nav class="menu-side main-navigation" id="site- navigation">
Home
page 2
page 3
</nav>
</div>
<div class="menu-bar">
<button class="menu-button" id="open-button">menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content content-wrap">
<div class="dummy-content">
<p>hoaubobaowbeobafohweofhwohfowuheofhowehfowhohfohwfohohohohohohohohoh</p>
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
`
CSS
html, body {
overflow: hidden;
width: 100%;
height: 100%;
background: #2a3032;
}
.container {
height: 100%;
}
.menu-wrap {
position: fixed;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.main-navigation {
background: none !important;
width: 240px !important;
clear: both;
display: block;
float: left;
}
.menu-bar {
width: 100%;
height: 6rem;
}
.container > .content-wrap {
background: #f8f7ee;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.container, .content-wrap {
height: 100%;
width: 100%;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
}
overflow: hidden means that anything beyond the bounds of the element is hidden; no scrolling. In this case, the html and body elements default to the dimensions of the window, and your footer is beyond those dimensions, so it is cut off.
My suggestion is that if you want your navigation bar to remain at the top of the screen, you give it a fixed position:
html, body {
background: #2a3032;
}
.menu-bar {
width: 100%;
height: 6rem;
position: fixed;
top: 0;
left: 0;
background: #2a3032;
z-index: 10;
}
.site-content {
background: #f8f7ee;
}
#content {
margin-top: 6rem;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
color: #fff;
}
<body>
<div class="container">
<div class="menu-bar">
<button class="menu-button" id="open-button">Menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content">
<div class="dummy-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec congue magna. Sed ullamcorper velit id dolor congue convallis. In massa est, gravida a eros vitae, ornare aliquet nunc. Mauris elementum enim ut dapibus scelerisque. Etiam luctus orci id quam congue finibus. Proin consequat dapibus porttitor. Etiam pretium consectetur nibh non porttitor. Donec in leo sit amet neque cursus sagittis nec vel est. Morbi metus libero, suscipit in fringilla nec, molestie ut diam. Sed rutrum magna vitae orci pellentesque, non feugiat nibh sollicitudin.
<p>Aliquam eget efficitur eros, eu egestas mauris. Morbi vel vehicula arcu. Integer viverra ipsum sed turpis laoreet dictum a vitae ex. Cras lectus libero, pellentesque quis nisi quis, tristique lobortis ante. Maecenas mattis ligula eget dui ultrices tristique. Sed in consectetur mauris. Fusce vulputate lacinia quam, sed ornare massa consequat in. Ut et turpis dui. Sed vitae diam vel sapien commodo mollis. Curabitur ante odio, tempor vel augue rhoncus, volutpat ultrices est. Curabitur nibh ipsum, dapibus et dignissim ut, faucibus eget nulla. Phasellus eget turpis rhoncus, pellentesque eros quis, iaculis quam. Nam laoreet felis sed nisi iaculis sagittis.
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
</body>
If you want to have another menu that opens on top of the first menu, then you can give it a larger z-index.
In general you want to avoid nested scroll bars; if something scrolls it should be the page as a whole, not individual elements.
the main problem is setting :
.content-wrap {
height: 100%;}
whenever you set height to 100% you need to think on what that means.. in your case it meant 100% of windowHeight, and since you had another div on top your footer this was pushed below the bottom ,
here's a working fiddle
For a small project, I need this little website that pulls data from a server via AJAX and outputs it like shown in this picture. However the problem isn't JavaScript, but pure HTML+CSS..
You can take a look at this page via jsfiddle by clicking this, or you can take a look at the quoted code that is quoted by the end of this post: http://jsfiddle.net/RdJUM/
The list is build with the following html snippet:
<div id="update">
<ul class="searchresults">
<li>
<h2>Caption</h2>
<div>
<img src="" alt="" />
<p>Text</p>
</div>
</li>
</ul>
</div>
It is formatted via CSS, but the important part is this:
#update ul li {
height: 110px;
overflow: hidden;
/* ... */
/*
-webkit-transition: height 0.3s ease-out;
-moz-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
*/
}
#update li:hover {
height: auto;
}
This works fine as long as you leave the transitions commented out. You hover on the article and it will scale the height to "auto" which gives exactly the height of your content and nothing more. However if you uncomment the transistions, WebKit (Chrome 30, Safari 6) do a really shaky effect that is completely unusable. For convenience this is the jsfiddle link to the uncommented version: http://jsfiddle.net/bQZ7F/
In Firefox 23 and Opera 12 this transition is deactivated, so it will behave as if the CSS part wasn't there.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Live Search</title>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<div id="searcharea">
<label for="search">live search</label>
<p>Enter the name or info about a speaker</p>
<input type="search" name="search" id="search" placeholder="name or info" />
</div>
<div id="update">
<ul class="searchresults">
<li>
<h2>Lorem Ipsum</h2>
<div>
<img src="http://placehold.it/80x80" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae. Mauris dolor nunc, ultrices eu leo sed, ornare lacinia quam. Pellentesque convallis massa at massa egestas, vestibulum vulputate dolor dignissim. Nullam sed metus a odio convallis molestie non a nisl. Donec eleifend lacus ut suscipit cursus. Cras viverra urna at arcu lacinia, in viverra neque pharetra. Suspendisse pellentesque tortor sit amet lacus elementum gravida et non risus. In cursus turpis vitae tortor molestie congue. Phasellus laoreet sit amet neque sit amet egestas. Aliquam sagittis ac massa vitae pulvinar. Vivamus bibendum odio sed enim porta pretium. Ut varius lacinia elit ut interdum. In in pretium metus.</p>
</div>
</li>
<li>
<h2>Lorem Ipsum</h2>
<div>
<img src="http://placehold.it/80x80" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante.</p>
</div>
</li>
<li>
<h2>Lorem Ipsum</h2>
<div>
<img src="http://placehold.it/80x80" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae.</p>
</div>
</li>
<li>
<h2>Caption</h2>
<div>
<img src="" alt="" />
<p>Text</p>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS:
/* #override
http://localhost/~simon/tests/ajax_search/mystyle.css */
body {
background: #DAD7C7;
}
#searcharea {
margin: 0 auto;
text-align: center;
background: #BF996B;
padding: 10px;
width: 30%;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#searcharea label {
font: bold 1.3em Arial;
text-transform: uppercase;
padding-bottom: 5px;
color: #A61C1C;
}
#searcharea p {
margin: 0;
line-height: 1em;
padding-bottom: 5px;
}
#searcharea input {
width: 80%;
text-align: center;
}
#update {
font-family: Georgia, "Times New Roman", Times, serif;
width: 70%;
margin: 0 auto;
border-top: 1px dotted #CCC;
}
#update ul {
list-style: none;
margin: 0;
padding: 0;
}
#update ul li {
width: 100%;
padding: 0 20px 20px;
background: #EEE;
height: 110px;
overflow: hidden;
border-bottom: 1px dotted #CCC;
-webkit-animation: myanim 1s;
-moz-animation: myanim 1s;
-o-animation: myanim 1s;
animation: myanim 1s;
-webkit-transition: height 0.3s ease-out;
-moz-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
}
#update li:hover {
background: #FFFCE5;
height: auto;
}
#update ul li div {
margin: 0;
padding: 0;
}
#update ul li div p {
margin: 0;
}
#update h2 {
margin: 0;
padding: 0;
font-size: 1.2em;
padding-bottom: 5px;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #BF5841;
border-bottom: 1px dotted #CCC;
margin-bottom: 10px;
}
#update img {
float: left;
width: 80px;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#-webkit-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#-moz-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#-o-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
Thanks for the hint, seems that it isn't possible without using JavaScript:
Set CSS to these values
#update ul li {
height: 110px;
/* ... */
}
#update li:hover {
background: #FFFCE5;
}
Principle of JavaScript code:
// Mouse-enter Event
curHeight = $(this).height();
autoHeight = $(this).css('height', 'auto').height();
$(this).height(curHeight).animate({height: autoHeight}, 1000);
// Mouse-leave Event
// same, but vice versa
You can grab the full code here: http://jsfiddle.net/9eaAq/