Responsive Horizontal Accordion - html

Question

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

Answer 1

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>