I have the following scenario:
I'm using bootstrap to develop this site. When I hover into a list group, everything is suppose to have a trnasition into a blue background color and the text should go white. It works though the styles don't apply to the H4.
Here's the css code:
.styled-group-right-item{
padding: 20px;
margin-left: 100px;
}
.limited-list-group{
height: auto;
max-height: 500px;
overflow-y: scroll;
}
.author-pubdate-info{
font-weight: bold;
}
.list-group-item-switchhon-blog:hover{
transition: all 0.5s ease !important;
color: #fff !important;
background-color: #2980b9 !important;
}
.list-group-item-switchhon-blog{
transition: all 0.5s ease;
}
And here is the markup:
<div class="list-group limited-list-group">
<a href="#" class="list-group-item clearfix list-group-item-switchhon-blog">
<div class="pull-left">
<img src="http://placehold.it/100x100" class="btn-center">
</div>
<div class="styled-group-right-item">
<h4 class="list-group-item-heading">Lorem Ipsum Dolor Sit Amet</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget interdum libero. Vivamus pharetra faucibus.</p>
<span class="author-pubdate-info">Autor: John Doe | Fecha: 11 de Noviembre de 2014</span>
</div>
</a>
</div>
And here's a fiddle: http://jsfiddle.net/y7d5fm1w/
What I have tried so far: add another class like this:
.list-group-item-switchhon-blog:hover h4{
transition: all 0.5s ease !important;
color: #fff !important;
background-color: #2980b9 !important;
}
But that creates a very funny effect, try it on fiddle, it's not good.
Any ideas how to apply the styles into the h4, please I'm all ears.
Apply the style to the h4 as well. Also, place the transition on the non hover state; This ensures that the transition will apply in and out of the hover state.
Aside: If you change overflow-y: scroll to overflow-y: auto, you will only get a scrollbar if the content actually overflows.
Changes
.list-group-item-switchhon-blog, .list-group-item-switchhon-blog h4 { /* transition here */
transition: all 0.5s ease !important;
}
.list-group-item-switchhon-blog:hover {
color: #fff !important;
background-color: #2980b9 !important;
}
.list-group-item-switchhon-blog:hover h4 { /* add this */
color: #fff !important;
}
Working example
.styled-group-right-item {
padding: 20px;
margin-left: 100px;
}
.limited-list-group {
height: auto;
max-height: 500px;
overflow-y: auto;
}
.author-pubdate-info {
font-weight: bold !important;
}
.list-group-item-switchhon-blog, .list-group-item-switchhon-blog h4 {
transition: all 0.5s ease !important;
}
.list-group-item-switchhon-blog:hover {
color: #fff !important;
background-color: #2980b9 !important;
}
.list-group-item-switchhon-blog:hover h4 {
color: #fff !important;
}
.list-group-item-switchhon-blog {
transition: all 0.5s ease;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group limited-list-group">
<a href="#" class="list-group-item clearfix list-group-item-switchhon-blog">
<div class="pull-left">
<img src="http://placehold.it/100x100" class="btn-center">
</div>
<div class="styled-group-right-item">
<h4 class="list-group-item-heading">Lorem Ipsum Dolor Sit Amet</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget interdum libero. Vivamus pharetra faucibus.</p>
<span class="author-pubdate-info">Autor: John Doe | Fecha: 11 de Noviembre de 2014</span>
</div>
</a>
</div>
Just trigger the h4 on hover:
.list-group-item-switchhon-blog:hover h4{
transition: all 0.5s ease;
color: #fff;
}
FIDDLE
UPDATE
A better way is actually setting the h4 to inherit the color from it's parent:
.list-group-item-switchhon-blog h4{
color: inherit !important;
}
That way you don't have to duplicate code and add extra code for the hover out
NEW FIDDLE
Related
Can anyone kindly help me out with my css+html issue? Please refer the code snippet I have added.
What I need to achive,
1. The boxes(.box) with images to stay fixed
2. The hidden description (.hidden) to go over the below image box when hovered without moving it
Can someone please help me figuring this out?
.box {
width: 170px;
transition: all .4s ease;
border-bottom: 10px solid #fff;
color:#000 !important;
}
#caption {
width: 160px;
font-size:15px;
text-decoration:none;
margin: 0 0 0px 5px;
}
.boximg{
width: auto;
max-width: 100%;
margin-bottom: 8px;
}
.box:hover {
width: auto;
max-width: 170px;
border-bottom: 10px solid #000;
transition: all .4s ease;
color:#ccdc29 !important;
background-color:#000;
}
.box:hover > #hidden {
display:block;
transition: all .3s ease;
overflow-x: hidden;
}
#hidden {
display:none;
color:#fff;
margin:5px;
transition: all .3s ease;
}
.image_off, #home:hover .image_on{
display:none;
transition: all .4s ease;
}
.image_on, #home:hover .image_off{
display:block;
transition: all .4s ease;
}
<div class="box">
<a href="#">
<img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" />
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
<a href="#">
<img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" />
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>
Thanks heaps!
Try the following. I have fixed your nested anchors, removed some duplicate ids and positioned the caption absolutely. The only thing I would say is the caption has an 18px minus margin - not sure what creates that gap for the margin to be needed
Also if you want to stop the blinking effect, you need to use the same size images - your hover one is slightly larger
.box {
width: 170px;
transition: all .4s ease;
color: #000 !important;
position:relative;
padding:0;
margin-bottom:10px;
}
.box > a
.box span,
.box img {
display:block;
}
#caption {
width: 160px;
font-size: 15px;
text-decoration: none;
margin: 0 0 0px 5px;
}
.boximg {
width: auto;
max-width: 100%;
}
.box:hover {
width: auto;
max-width: 170px;
transition: all .4s ease;
color: #ccdc29 !important;
z-index:2;
}
.box:hover>#caption {
display:none;
}
.box:hover>#hidden {
display: block;
transition: all .3s ease;
background-color: #000;
}
#hidden {
display: none;
color: #fff;
transition: all .3s ease;
position:absolute;
left:0;
right:0;
top:100%;
padding:5px;
margin:-18px 0 0 0;
}
.box .image_off,
#home:hover .image_on {
display: none;
transition: all .4s ease;
}
.box .image_on,
#home:hover .image_off {
display: block;
transition: all .4s ease;
}
<div class="box">
<a href="#">
<span class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
/></span>
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
<a href="#">
<span class="boximg" id="home1"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
/></span>
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>
.img-with-text{
position: relative;
width: 170px;
}
.img-with-text > div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0);
color: transparent;
transition: 1s;
}
.img-with-text > div:hover{
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
<div class="img-with-text">
<img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
<div><h2>Hello!</h2></div>
</div>
<div class="img-with-text">
<img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
<div><h2>Hello!</h2></div>
</div>
I am using a slightly modified version of this: https://codepen.io/ferry/pen/ZYVwxz (Thank you Michael Ferry).
HTML:
<div class="accordion">
<ul>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="0">
<div>
<a href="#">
<h2>Lorem Ipsum 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
CSS:
<style>
.accordion {
width: 100%;
max-width: 1140px;
height: 560px;
overflow: hidden;
margin: 20px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
list-style-type: none;
display: table-cell;
top:0px;
vertical-align: top;
position: relative;
width: 16.666%;
height: 520px;
background-repeat: no-repeat;
background-position: top center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 520px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 0px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
text-overflow: clip;
font-size: 24px;
/*text-transform: uppercase;*/
margin-bottom: 0px;
top: 435px;
color:#000;
}
.accordion ul li div a p {
top: 440px;
font-size: 13.5px;
color:#000;
}
.accordion ul li:nth-child(1) {
background-image: url("1b.jpg");max-height:400px;
}
.accordion ul li:nth-child(2) {
background-image: url("2b.jpg");max-height:400px;
}
.accordion ul li:nth-child(3) {
background-image: url("3b.jpg");max-height:400px;
}
.accordion ul li:nth-child(4) {
background-image: url("4b.jpg");max-height:400px;
}
.accordion ul li:nth-child(5) {
background-image: url("5b.jpg");max-height:400px;
}
.accordion ul li:nth-child(6) {
background-image: url("6b.jpg");max-height:400px;
}
.accordion ul:hover li {
width: 16%;
}
.accordion ul:hover li:hover {
width: 100%;
}
.accordion ul:hover li:hover a {
}
.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;
}
}
</style>
I can't get it to display the "slide" when using the keyboard.
I have tried adding .active, :focus, role="button", aria-expanded="true" and tab-index to no avail.
Before I go bald, does anyone have a solution? (without using javascript)
Thanks so much!
If you use tabindex="1" on your li like <li tabindex="1">, you should be able to target them with :focus as
li {
&:focus {
// your stuff here
}
}
Right now what happened is when you press tab it selects the a element but the transformation is applied on the li.
If I take the code from Michael Ferry's code pen you will have the following lines.
HTML:
<h1>Responsive Accordion</h1>
<div class="accordion">
<ul>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
<p class="about">
By Michael Ferry
</p>
<h1>Responsive Accordion</h1>
<div class="accordion">
<ul>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li tabindex="1">
<div>
<a href="#">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>
<p class="about">
By Michael Ferry
</p>
SCSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Montserrat:700);
// Accordion Height
$a-height: 250px;
// Position text along bottom
$text-offset: $a-height - 90;
// Page Title
h1 {
text-align: center;
font-family: Montserrat, sans-serif;
color: #333;
}
.accordion {
width: 100%;
max-width: 1080px;
height: $a-height;
overflow: hidden;
margin: 50px auto;
ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%; // 6 into 100
height: $a-height;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
div {
display: block;
overflow: hidden;
width: 100%;
a {
display: block;
height: $a-height;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: Open Sans, sans-serif;
transition: all 200ms ease;
* {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
h2 {
font-family: Montserrat, sans-serif;
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: $text-offset;
}
p {
top: $text-offset;
font-size: 13.5px;
}
}
}
}
// Background images
li:nth-child(1) {
background-image: url("http://michael-ferry.com/assets/accordion1.jpg");
}
li:nth-child(2) {
background-image: url("http://michael-ferry.com/assets/accordion2.jpg");
}
li:nth-child(3) {
background-image: url("http://michael-ferry.com/assets/accordion3.jpg");
}
li:nth-child(4) {
background-image: url("http://michael-ferry.com/assets/accordion4.jpg");
}
li:nth-child(5) {
background-image: url("http://michael-ferry.com/assets/accordion5.jpg");
}
li:nth-child(6) {
background-image: url("http://michael-ferry.com/assets/accordion6.jpg");
}
&:hover li,
li:focus ~ li{
width: 8%;
}
&:hover li:hover,
li:focus {
width: 60%;
a {
background: rgba(0, 0, 0, 0.4);
* {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
}
}
}
// Stack items
#media screen and (max-width: 600px) {
// IE gets fussy if this isn't here
body {
margin: 0;
}
.accordion {
height: auto;
ul,
ul:hover {
li,
li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
}
}
.about {
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #666;
a {
color: blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
In the SCSS code I have added li:focus ~ li to target li's siblings and li:focus to the existing code to reproduce the animation.
I also recommend you to disable a element tabbing with tabindex=0 in order to avoid the user to scroll top again after tabbing through the slider.
Focus within fix this issue, and works fine
:hover, :focus-within {
your css
}
you can check MDN to learn more about focus-within
I want to display text at the center of my 4 images. No matter what I do it doesn't display at all or display on the top of the page.
Somebody, please help me!
By the way, does anybody know how to make banner-text always stay the same (the same as at 100%) when zooming?
UPD: https://jsfiddle.net/5no1pjt2/4/
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
#banner {
position: relative;
width: 100%;
}
#banner img {
width: 100%;
height: 100%;
float: left; /* no line after <img> */
}
#banner-text {
position: absolute;
margin: 250px 120px;
font-size: 42px;
color: #ffffff;
/* background: rgba(0, 0, 0, 0.5); */
}
#banner-text p {
width: 800px;
/* font-family: Palanquin Regular; */
font-size: 24px;
line-height: 24px;
}
#img__wrap img {
width: 50%;
height: auto;
/* display: inline-block; */
float: left; /* no line after <img> */
/* transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#img__wrap img:hover {
/* filters for animation */
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
}
/* relevant styles */
#img__wrap {
position: relative;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: visible;
opacity: 0;
}
#img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div id="banner">
<img src="http://placehold.it/1920x1080"/>
<div id="banner-text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ultrices tellus, at vulputate risus.Cras convallis molestie libero, ac fringilla lacus lobortis ut.
</p>
</div>
</div>
<div id="img__wrap">
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
The key is to create a wrapper to hold your image and text. Then add position relative to that wrapper. And then to the text inside it, add top 50% and then lift it half of its height by adding transform translateY(-50%).
If you want the same for X axis, use left 50% and translateX(-50%).
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
#banner {
position: relative;
width: 100%;
}
#banner img {
width: 100%;
height: 100%;
float: left; /* no line after <img> */
}
#banner-text {
position: absolute;
margin: 250px 120px;
font-size: 42px;
color: #ffffff;
/* background: rgba(0, 0, 0, 0.5); */
}
#banner-text p {
width: 800px;
/* font-family: Palanquin Regular; */
font-size: 24px;
line-height: 24px;
}
#img__wrap img {
width: 100%;
height: auto;
/* display: inline-block; */
float: left; /* no line after <img> */
/* transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#img__wrap img:hover {
/* filters for animation */
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
height: 40px;
transform: translateY(-50%);
text-align: center;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
.image-wrap {
position: relative;
width: 50%;
float: left;
}
<div id="banner">
<img src="http://placehold.it/1920x1080"/>
<div id="banner-text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ultrices tellus, at vulputate risus.Cras convallis molestie libero, ac fringilla lacus lobortis ut.
</p>
</div>
</div>
<div id="img__wrap">
<div class="image-wrap">
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="image-wrap">
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="image-wrap">
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="image-wrap">
<img class="img__img" src="http://placehold.it/952x512"/>
<p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
To make the banner text central in the banner you could try:
#banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 42px;
color: #ffffff;
}
Its worth noting that the transform won't work on older versions of IE.
I want to display text at the center of my 4 images.
No matter what I do it doesn't display at all or display
on the top of the page.
You have two problems:
The "absolute" position declaration for the "img__description". The absolute position rule you have used on the text (<p class="img__description">...</p>) places all 4 texts in the upper left hand corner of the page. Declare a relative position for the text, and then give the text something to be relative to. (See next point).
Structure: No relation exists between each img and text pair There is currently no container or relationship tying any of the text elements (<p class="img__description">...</p>) to any of your 4 images: <img class="img__img" src="..." />.
It will be difficult to position the text relative to the appropriate image without a wrapper. Consider either:
moving the image inside each paragraph, and moving your positioning and sizing rules to the paragraph, which will act like a wrapper;
or add a <div> around each image and text pair, and subsequently move your positioning and sizing rules to the new <div> wrapper
Either of these wrapper options will also constrain the height and width of the text, which you also need.
I'm sure this is possible but I can't get it to work, I want to create a banner with 4 slides and 4 buttons underneath it.
The first slide should show initially until you hover over say 'button 2' and it hides slides 1, 3 & 4 and displays slide 2 and holds that slide there (mouse off) until another button is hovered over and it will then show the corresponding slide and hide the rest.
I want to try and do all this in HTML/CSS without the need for jQuery if it is possible.
My code:
<style type="text/css">
.banners {width:100%; max-width:1004px; height:100%; max-height:546px; overflow: hidden;}
#slide1 {width:100%; height:100%; background:yellow; display:block;}
#slide2 {width:100%; height:100%; background:blue; display:none;}
#slide3 {width:100%; height:100%; background:green; display:none;}
#slide4 {width:100%; height:100%; background:red; display:none;}
#bannerbutton1 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:yellow;}
#bannerbutton2 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:blue;}
#bannerbutton3 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:green;}
#bannerbutton4 {width:100%; max-width: 251px; height:100%; max-height: 40px; float:left; background:red;}
</style>
<div class="banners">
<div id="slide1">
</div>
<div id="slide2">
</div>
<div id="slide3">
</div>
<div id="slide4">
</div>
</div>
<a id="bannerbutton1" href="">
BANNER 1
</a>
<a id="bannerbutton2" href="">
BANNER 2
</a>
<a id="bannerbutton3" href="">
BANNER 3
</a>
<a id="bannerbutton4" href="">
BANNER 4
</a>
It might be simple and I might be missing something but help would be greatly appreciated.
Such things must be done using JavaScript. Hovering and hiding elements with pure CSS is only possible if the elements supposed to be shown/hidden are child elements of those, which you hover with your mouse. For example:
<div class="hover-to-hide-sub-div">
<div class="hide-me"></div>
</div>
and in the CSS:
div.hover-to-hide-sub-div:hover div.hide-me { display: none; }
If this hierarchy is not given, JS is needed.
Yes, you can do it without JavaScript or JQuery, but only the hover thing. If you want to stay on image when it's not on hover, then you need use JavaScript or JQuery. That's because css selector is not active when your mouse is out of the button.
Whatever, this is my code for you, pure css3. It works fine for the hover and show the image while you do hover at the button.
HTML
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<div class="sliderinner">
<ul>
<li>
<img src="bea.jpg" />
<div class="description">
<div class="description-text">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li>
<img src="bea.jpg" />
<div class="description">
<div class="description-text">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li>
<img src="bea.jpg" />
<div class="description">
<div class="description-text">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li>
<img src="bea.jpg" />
<div class="description">
<div class="description-text">
<h2>Title 4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li>
<img src="bea.jpg" />
<div class="description">
<div class="description-text">
<h2>Title 5</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.slider {
display: block;
height: 320px;
min-width: 260px;
max-width: 640px;
margin: auto;
margin-top: 20px;
position: relative;
}
.sliderinner {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sliderinner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sliderinner>ul>li {
width: 20%;
height: 320px;
float: left;
position: relative;
}
.sliderinner>ul>li>img {
margin: auto;
height: 100%;
}
.slider input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slider label {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color:#ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.slider input[type=radio]#control1:hover~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:hover~label[for=control2] { background-color: #333; }
.slider input[type=radio]#control3:hover~label[for=control3] { background-color: #333; }
.slider input[type=radio]#control4:hover~label[for=control4] { background-color: #333; }
.slider input[type=radio]#control5:hover~label[for=control5] { background-color: #333; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:hover~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:hover~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:hover~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:hover~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:hover~.sliderinner>ul { left: -400% }
.description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-family:Archivo Narrow;
z-index: 1000;
}
.description-text {
background-color: rgba(0,0,0,.8);
padding:10px;
top: 0;
z-index: 4;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: #fff;
}
With CSS you can hide/show using child and sibling selectors, that is true. But even with sibling selectors the :hover elements must come before the effected element.
If you changed your structure, you could achieve a hover switch for hover states of the buttons using the :hover pseudo class and the general sibling selector ~. Here is an example:
http://jsfiddle.net/xxgLzgax/
Now using smart positioning you might be able to re-position this as you need but your problem comes when you want to keep the state of the last hovered element.
CSS is purely for styling, and even though it does cater for pseudo states of elements (inasmuch as their style), it is not able to do such a thing. :hover is for style on hover nothing else.
So as other posters have stated, you would need to use JS/JQuery to do this. Something probably along the lines of:
$( "button" ).on("mouseenter", function() {
$('class/ID to show').addClass( "hover" ).siblings().removeClass( "hover" );
});
But regardless of the JS solution to keep the state the same and make this particular setup work, you would have to use JS. Also if you do use JS to do this, I suggest using a class to toggle this, keeping the CSS and JS separate.
I need your help. Hope someone can teach me how do this.
I want to have an orange underline on an image hover like on the "latest projects" on this template. I have no idea how to do that and I would like to know. Your answers would be highly appreciated !
This is my HTML.
<div class="sixteen columns">
<h4 class="headline">Recent Work</h4>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_images/portfolio_3_01.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>SockMonkee</h5>
<p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_images/portfolio_3_06.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>Franky Fisticuffs</h5>
<p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_images/portfolio_3_04.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>Package Project</h5>
<p>Gravida sit amet ligula eget conseact etur lectu aecenas hendrerit bibenea.</p>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_img_04.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>Ampertastic Mr. Fox</h5>
<p>Fermentum sit amet ligula estabe, eget conseact lectus maecenas hendrerit.</p>
</div>
</div>
<div class="clearfix"></div>
And my CSS
.portfolio-item {margin-bottom: 20px;}
.portfolio-item-meta h5 {
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 16px;
padding: 12px 0 8px 0;
margin: 0 0 8px 0;
border-bottom: 1px solid #e7e7e7;
letter-spacing: 0;
}
.portfolio-item-meta h5 span {
display: block;
color: #888;
font-weight: normal;
margin-top: 3px;
}
.portfolio-item-meta a{color:#444;}
.portfolio-item-meta a:hover {color:#888;}
.portfolio-item-meta p {color: #555;}
.item-img, .post-img {position: relative;}
.overlay {
height: 100%;
left: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
z-index: 40;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 180ms ease-in-out;
-moz-transition: opacity 180ms ease-in-out;
-o-transition: opacity 180ms ease-in-out;
transition: opacity 180ms ease-in-out;
}
.overlay.zoom {background: url(../images/overlay.png) no-repeat center center, url(../images/overlay_bg.png) center center;}
.overlay:hover {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
Have you tried this?
.item-img:hover {border-bottom: 1px solid orange;}
if it works you will need to add
transition: all 0.1s linear
for example, but you can find more here:
http://www.w3schools.com/css/css3_transitions.asp