Is it possible to vertically center a caption on hover using the following code? I know I could add a div surrounding the figcaption tag to do an overlay, but I'd like to know if it's possible to do the same without adding more HTML code.
HTML:
<figure class="caption">
<img src="image.jpg" alt="" />
<figcaption class="caption-text">Some text</figcaption>
</figure>
CSS:
.caption {
position: relative;
}
.caption img {
display: block;
margin: 0;
}
.caption-text {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.caption:hover .caption-text {
display: block;
background: rgba(30, 30, 30, 0.7);
}
Thanks in advance
You can use Flexbox on .caption-text
.caption {
position: relative;
display: inline-block;
}
.caption img {
display: block;
margin: 0;
}
.caption-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease-in;
}
.caption:hover .caption-text {
background: rgba(30, 30, 30, 0.7);
opacity: 1;
}
<figure class="caption">
<img src="http://placehold.it/350x150">
<figcaption class="caption-text">Some text</figcaption>
</figure>
Related
I have two absolute elements, which overlap. I would like to have one to show above the other. In the below example, I want the pink figure with text to show above the pseudo-element created with ::before.
I've tried the z-index, but it doesn't seem to help.
Any ideas?
.navbar {
display: flex;
}
.lightbox {
display: none;
margin: auto;
}
.links {
flex: 1;
text-align: center;
display: block;
}
.lightbox:target {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: black;
left: 0;
align-items: center;
justify-content: center;
}
#close_button {
position: relative;
display: block;
}
.lightbox #close_button::after {
content: "x";
color: white;
position: absolute;
align-items: center;
justify-content: center;
right: -1rem;
top: -1rem;
z-index: 2;
width: 2rem;
height: 2rem;
background: black;
border-radius: 50%;
cursor: pointer;
display: flex;
}
figcaption {
z-index: 1000;
background: lightpink;
width: 25rem;
text-align: center;
}
#close_button::before {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,.7);
height: 100%;
width: 100%;
content: "";
border: solid red;
position: fixed;
}
<div style="height: 200px; background: lightgreen;">
<nav class="navbar">
<a class="links" href="#text1">Open example 1</a>
<a class="links" href="#text2">Open example 2</a>
</nav>
<br><br>
<div class="lightbox" id="text1">
<figure>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>
For z-index to work element has to have a position other than static. In your case element needs to have position: relative
.navbar {
display: flex;
}
.lightbox {
display: none;
margin: auto;
}
.links {
flex: 1;
text-align: center;
display: block;
}
.lightbox:target {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: black;
left: 0;
align-items: center;
justify-content: center;
}
#close_button {
position: relative;
display: block;
}
.lightbox #close_button::after {
content: "x";
color: white;
position: absolute;
align-items: center;
justify-content: center;
right: -1rem;
top: -1rem;
z-index: 2;
width: 2rem;
height: 2rem;
background: black;
border-radius: 50%;
cursor: pointer;
display: flex;
}
figcaption {
z-index: 1000;
background: lightpink;
width: 25rem;
text-align: center;
position: relative;
}
#close_button::before {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,.7);
height: 100%;
width: 100%;
content: "";
border: solid red;
position: fixed;
}
I have following example: https://codepen.io/elenaoat/pen/NzdVda?editors=1100
When you click on the buttons you will see some text popping up. I cannot figure out how to get the text in the figcaption to be "above" the pseudo-element created with before. Right now the pseudo-element covers the whole window, which is fine, but I want the pink div with the text to show above it, so it's not greyed out.
<div style="height: 200px; background: lightgreen;">
<nav class="navbar">
<a class="links" href="#text1">Open example 1</a>
<a class="links" href="#text2">Open example 2</a>
</nav>
<br><br>
<div class="lightbox" id="text1">
<figure>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>
Add position: relative to figcaption and also changed z-index on the after element and the figcaption.
z-index property only works on fixed, absolute or relative divs. So thats why you need the relative position on figcaption and even z-index:2 will work in that case. No need of 1000 value. Similarly, you need just one higher value for the after close icon. So zindex 3 will also work.
.navbar {
display: flex;
}
.lightbox {
display: none;
margin: auto;
}
.links {
flex: 1;
text-align: center;
display: block;
}
.lightbox:target {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: black;
left: 0;
align-items: center;
justify-content: center;
}
#close_button {
position: relative;
display: block;
}
.lightbox #close_button::after {
content: "x";
color: white;
position: absolute;
align-items: center;
justify-content: center;
right: -1rem;
top: -1rem;
z-index: 3;
width: 2rem;
height: 2rem;
background: black;
border-radius: 50%;
cursor: pointer;
display: flex;
}
figcaption {
position: relative;
z-index: 2;
background: lightpink;
width: 25rem;
text-align: center;
}
#close_button::before {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,.7);
height: 100%;
width: 100%;
content: "";
border: solid red;
position: fixed;
}
<div style="height: 200px; background: lightgreen;">
<nav class="navbar">
<a class="links" href="#text1">Open example 1</a>
<a class="links" href="#text2">Open example 2</a>
</nav>
<br><br>
<div class="lightbox" id="text1">
<figure>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>
Try setting the figcaption position to relative.
I am trying to draw a number of CSS generated circles that have images as background. In my current code, the background image is set as a fixed image in the CSS code.
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url("http://deepchains.com/images/team.png") center / cover no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
color: transparent;
}
.circle:hover {
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
.ccont:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Here is a sample result that I see in Chrome Browser:
My question is how to change the background images of each circle separately in the HTML code? I will have a number of these circles that I like them to be aligned and in the same line, and I want to set their background images in the HTML code and remove the background image from the CSS. How can I do that?
An easy solution is to transform your peudo element to an element and use background-image as inline style so you can easily change the image for each element and apply all the same properties as the pseudo element:
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle .image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover .image {
opacity: 1;
color: transparent;
}
.circle:hover .ccont{
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<span class="image" style="background-image: url(http://lorempixel.com/400/300/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<span class="image" style="background-image:url(https://lorempixel.com/400/200/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Simply set up the background image on the pseudo to be inherited from parent, set the size on parent to 0 to hide it there, and finally, set style="background-image: url(...)" in the markup.
Updated
You can even drop the inner div and still achieve the same effect
Stack snippet
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-weight: bold;
text-decoration: none;
border: 0;
margin: 10px;
background-size: 0; /* hide image by set its size to 0 */
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit; /* inherit from parent */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
}
.circle:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html" style="background-image: url(https://picsum.photos/300/300?image=1070);">
This is <br>Text1
</a>
<a class="circle" href="http://www.url2.html" style="background-image: url(https://picsum.photos/300/300?image=1072);">
This is <br>Text2
</a>
</div>
Building my portfolio site and trying to show project name on hover over the image. I found some css people use to achieve this but does not work on my site for some reason. What could I be doing wrong?
.portfolioImage-half {
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Try using CSS Flexbox. Make your
.text-content a flex container using display: flex;
Give .portfolioImage-half position relative
Give width & height in %ages
Like:
.portfolioImage-half {
position: relative;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
Have a look at the working snippet below:
.portfolioImage-half {
position: relative;
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Hope this helps!
No you cannot style the img alt attribute.
Try:
adding a "z-index: 1; position: absolute;" to the .portfolioImage-half:hover span.text-content class.
Then add a "z-index:0; position: relative;" to the .portfolioImage-half class
You will most probably need to position the "span.text-content" element by using "Left"/"Right" properties
I've created this simple html, css code that overlays a play button over a thumbnail. All works perfectly, except that the button is behind the dark background:
https://jsfiddle.net/72r62kzy/20/
I'm almost here, but for this CSS style to be perfect, i need the white play button to be on top of the dark background. How?
<ul class="thumb">
<li>
<div class="overlay">
<img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt="">
<span class="time">3:28</span>
<a href="#" class="playWrapper">
<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>
</a>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
CSS
.thumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.thumb li {
width: 193px;
}
.thumb li ~ li {
margin-left: 20px;
}
.thumb .thumbCaption {
padding: 10px 0;
}
.overlay {
position: relative;
}
.overlay .thumbnail {
display: block;
}
.overlay .time {
position: absolute; z-index: 2;
right: 3px; bottom: 3px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background-color: black;
}
.playWrapper .playBtn {
position: absolute; z-index: 2;
width: 50px; height: 50px;
left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* center */
}
.thumb .overlay:hover .playWrapper {
opacity: .6;
}
The reason the play button seems to be behind, is because the container is transparent.
Make the container fully visible opacity: 1, and use the rgba format to add the background (rgba(0,0,0,0.6)).
Also you don't need so many containers.
Here's 2 ways to do that:
JSfiddle - jsfiddle.net/72r62kzy/21
.thumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.thumb li {
width: 193px;
}
.thumb li ~ li {
margin-left: 20px;
}
.thumb .thumbCaption {
padding: 10px 0;
}
.overlay {
position: relative;
}
.overlay .thumbnail {
display: block;
}
.overlay .time {
position: absolute; z-index: 2;
right: 3px; bottom: 3px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background: rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center / 50px 50px;
}
.playWrapper .playBtn {
position: absolute; z-index: 2;
width: 50px; height: 50px;
left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* center */
}
.thumb .overlay:hover .playWrapper {
opacity: 1;
}
<ul class="thumb">
<li>
<div class="overlay">
<img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt="">
<span class="time">3:28</span>
<a href="#" class="playWrapper">
<!--<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>-->
</a>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
<li>
<div class="overlay">
<img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt="">
<span class="time">12:10</span>
<a href="#" class="playWrapper">
<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>
</a>
</div>
<div class="thumbCaption">description goes here...</div>
</li>
</ul>
The left thumbnail adds the play button with only one container <a>, and the right is the way you have it.
Here's the simple solution.
Replace this
.thumb .overlay:hover .playWrapper {
opacity: .6;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background-color: rgba(0, 0, 0, 1);
}
with
.thumb .overlay:hover .playWrapper {
opacity: 1;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background-color: rgba(0, 0, 0, .5);
}
I move the image from the HTML into the CSS
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background-image: url("http://wptf.com/wp-content/uploads/2014/05/play-button.png");
background-size: 50px 50px;
background-position: center;
background-repeat: no-repeat;
background-color: black;
}
now you can remove 'http://wptf.com/wp-content/uploads/2014/05/play-button.png' from
I have a text element that appears over the image on mouseover. The text bit is horizontally centered but I'm still having troubles centering it vertically despite trying several techniques. Trying to achieve this without Javascript.
HTML:
<figure class="wp-caption-my">
<img class="demo-my" src="image.png" alt="Image" />
<figcaption class="wp-caption-text-my">This is a caption text</figcaption>
</figure>
CSS:
.wp-caption-my {
position: relative;
padding: 0;
margin: 0;
}
.wp-caption-my img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text-my {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,191,255,0.9);
text-align: center;
-webkit-transition: opacity .3s ease-in-out !important;
transition: opacity .3s ease-in-out !important;
}
.wp-caption-my:hover .wp-caption-text-my {
opacity: 1;
}
img.demo-my {
width: 100% !important;
height: 100% !important;
}
I think you can use CSS pseudo elements this way:
.wp-caption-my {
position: relative;
padding: 0;
margin: 0;
}
.wp-caption-my img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text-my {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,191,255,0.9);
text-align: center;
-webkit-transition: opacity .3s ease-in-out !important;
transition: opacity .3s ease-in-out !important;
}
.wp-caption-my:hover .wp-caption-text-my {
opacity: 1;
}
.wp-caption-text-my::before {
content: "";
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
}
.wp-caption-text-my span {
display: inline-block;
vertical-align: middle;
}
img.demo-my {
width: 100% !important;
height: 100% !important;
}
<figure class="wp-caption-my">
<img class="demo-my" src="http://janisweb.tk/grahams/wp-content/uploads/2016/07/officewaste.png" alt="Image" />
<figcaption class="wp-caption-text-my"><span>This is a caption text</span></figcaption>
</figure>
This is done by wrapping your text in a span and adding this CSS to your styles:
.wp-caption-text-my::before {
content: "";
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
}
.wp-caption-text-my span {
display: inline-block;
vertical-align: middle;
}
Wrap the text inside another element, and set top:
HTML
<figcaption class="wp-caption-text-my"><h3>This is a caption text</h3></figcaption>
CSS
.wp-caption-text-my h3 {
position: relative;
top: 50%;
line-height: 18px;
margin-top: -18px;
}
Check it with more text:
Codepen: https://codepen.io/anon/pen/LkAyEd
Aligning your text to the center of your image, using pseudo element :before on-hover.
.wp-caption-text-my:before{
content:'';
display:block;
width:100%;
height:50%;
background:#f22;
}
I have added background color to pseudo element, so you could understand what it does and then you can align it accordingly to your needs.
.wp-caption-my {
position: relative;
padding: 0;
margin: 0;
}
.wp-caption-my img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text-my {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,191,255,0.9);
text-align: center;
-webkit-transition: opacity .3s ease-in-out !important;
transition: opacity .3s ease-in-out !important;
}
.wp-caption-text-my:before{
content:'';
display:block;
width:100%;
height:50%;
background:#f22;
}
.wp-caption-my:hover .wp-caption-text-my {
opacity: 1;
}
img.demo-my {
width: 100% !important;
height: 100% !important;
}
<figure class="wp-caption-my">
<img class="demo-my" src="https://source.unsplash.com/random" alt="Image" />
<figcaption class="wp-caption-text-my">This is a caption text
<figcaption style="padding-top:5px;">Add such more captions</figcaption>
<figcaption style="padding-top:5px;">And style them as you want.</figcaption>
</figcaption>
</figure>
To center horizontally and vertically an absolute element you can easily do
position: absolute
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
fiddle here: http://jsfiddle.net/mBBJM/1/
from https://codemyviews.com/blog/how-to-center-anything-with-css#comment-684580538