I want the caption of a image (which is not necessary is a real caption) appear when the image is hovered. The text should appear from left to right so it's container should grow on the X axis as the image is hovered. I have been able to make the text appear on hover but the transition effect is where I am stuck.
This is what I have tried:
CSS:
.morbid {
display: none;
margin-left:10px;
}
a:hover + .morbid {
position:relative;
display: block;
}
HTML:
<a>
<img src='.../goals/sia.png'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
Actually the whole div must grow, text remaining static and I want the text to be hidden unless the image is hovered.
You cannot transition the display property's change of value. The full list of properties which can be animated is available in the spec.
For the content to grow and appear you need to transition the max-width (or width, if you can set a fixed width to the element) like done in below snippet.
.morbid {
width: auto;
max-width: 0%;
white-space: nowrap;
overflow: hidden;
transition: max-width 1s linear;
}
a:hover + .morbid {
max-width: 100%;
}
<a href="#">
<img src='http://picsum.photos/400/200'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
JSFiddle
Alternately, if you want the text to grow from the center then you can make use of absolute positioning with transform like in the below snippet.
.container {
position: relative;
width: 400px;
}
.morbid {
position: absolute;
left: 50%;
max-width: 0%;
white-space: nowrap;
overflow: hidden;
transform: translateX(-50%);
transition: max-width 1s linear;
}
a:hover + .morbid {
max-width: 100%;
}
<div class="container">
<a href="#">
<img src='http://picsum.photos/400/200'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
</div>
JSFiddle
Use the transition property on the element you want to add a transition effect.
Make the caption grow and shrink in size:
CSS:
.morbid {
/* display: none; */
margin-left:10px;
opacity: 0;
font-size: 12pt;
-webkit-transition: font-size 0.25s;
transition: font-size 0.25s;
}
a:hover + .morbid {
position:relative;
/* display: block; */
font-size: 16pt;
opacity: 1;
}
HTML:
<a>
<img src='.../goals/sia.png'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
I had to change opacity for the caption instead of changing the display property because the animation doesn't show when changing the display property.
Related
Basically, I have this one block that I want to center in the middle of the page. This block should technically have both an image, and text. When the block isn't hovered over, I want only the image to appear centered on the page. When the block is hovered over, I want the image to move to the left a bit, and have the text appear to the right of it. So far, I've managed to make the image centered, to make it move to the left on hover, and to get the hover to display the text. The problem is, the text is under the image. I understand this is because the image and the text are in different div's, and so it would make sense that it would appear after. However, I'm not sure how to both make them in the same div, and ensure that the image is dead-center on the page when the block isn't hovered over. Is this possible?
Specifically, here's the HTML code for that section so far:
<section class="about-us">
<!-- Image division -->
<div class="chatBox">
<img src='./art/chatboxAbout.png' width= "150" height = "150" />
</div>
<!-- Text division, the actual about-us part -->
<div class="about-us-text-container">
<!-- Header part -->
<h1>about us</h1>
<!-- Horizontal line for styling -->
<hr />
<!-- Actual text -->
<p>For artists, not by artists</p>
</div>
</section>
and the CSS:
/* General sizing and format for the about-us segment */
.about-us{
width: 100%;
height: 200vh;
background-color: #fff;
}
/* Formatting for the chatBox image, basic stuff */
.about-us .chatBox{
position: relative;
margin-top: 50px;
text-align: center;
transition: transform 0.3s ease; /* Preparing for transition */
transition: translateX(0px); /* What the transition is */
}
/* Move left on hover effect */
.chatBox:hover{
transform: translateX(-200px);
}
/* Formatting for the general text div */
.about-us .about-us-text-container{
margin-top: 50px;
text-align:center;
margin-left: 15px;
opacity: 0; /* Don't display unless hovered */
transform: 1s; /* Setting duration for the hover opacity transition */
}
/* Show on hover effect */
.chatBox:hover + .about-us-text-container{
opacity: 1;
}
/* Formatting for the header */
.about-us .about-us-text-container h1{
}
/* Formatting for the horizontal line */
.about-us .about-us-text-container hr{
}
/* Formatting for the paragraph */
.about-us .about-us-text-container p{
}
Here's the JSFiddle link for the entire code so far: https://jsfiddle.net/bypvm6fu/
Any help is appreciated! Thank you so much!
Here's a possible solution for you. I changed a lot in your code, main things being: The container just contains the elements you already have (not 200vh = twice the window height). Just add another container around that, and sibling following it. The transition affects all, i.e. width, opacity and transform: scale to keep the image centered when not hovered. And the hover is on the container, not on the image, that way preventing the jumping effect you had before:
.about-us {
width: 100%;
height: 150px;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
margin-top: 50px;
}
.about-us .chatBox {
position: relative;
text-align: center;
}
.about-us .about-us-text-container {
text-align: center;
margin-left: 15px;
opacity: 0;
transition: all 1s;
width: 0;
transform: scale(0);
}
.about-us:hover .about-us-text-container {
opacity: 1;
width: 150px;
transform: scale(1);
}
<section class="about-us">
<div class="chatBox">
<img src="https://picsum.photos/150" width="150" height="150" />
</div>
<div class="about-us-text-container">
<h1>about us</h1>
<hr />
<p>For artists, not by artists</p>
</div>
</section>
When I use the opacity on image hover. It only getting lighter or dimmer but not darker.
I have tried to increase the number of opacity to make it darker, but not success. Below is the code block that I have tried to make the image become darker on hover:
<style>
.category-product img {
display: block;
margin-left: auto;
margin-right: auto
}
.category-product img:hover {
opacity: 0.5;
}
</style>
<div class="category-product">
<img src="hinh/paris.jpg" data-img="product-image-1">
</div>
Image of opacity applied on my current try
I expect the image will become darker on hover.
Expected result
They way to use opacity is by the other side you are trying. 1 opacity means that element is full opaque, "opacity: .5" means half opacity, so you will see you element half transparent and the color of the element behind the image and thats your result.
A quick, better and easy way to get that effect is using filter propierties of css.
<style>
.category-product img {
display: block;
margin-left: auto;
margin-right: auto;
transition: all .3s;/* I put this to get smooth transition */
}
// Then at hover, you can do a filter: brightness and set a lower value
.category-product img:hover {
filter: brightness(0.4);
}
</style>
<div class="category-product">
<img src="http://lorempixel.com/output/sports-q-c-640-480-7.jpg" data-img="product-image-1">
</div>
Here is the example at Codepen:
https://codepen.io/ChemaAlfonso/pen/ROJNev
hope it helps you
Style opacity = 0.5 will make the image become dimmer but not darker. To make the picture become darker on hover, we set the background div containing the picture to dark. Thus, when hovered the picture will dimmer and with the black background, it will make the picture looks darker.
<style>
.category-product {
background: black;
}
.category-product img {
display: block;
margin-left: auto;
margin-right: auto
}
.category-product img:hover {
opacity: 0.5;
}
</style>
<div class="category-product">
<img src="hinh/paris.jpg" data-img="product-image-1">
</div>
In the code above, I just set the containing div with black background.
On mouse hover use background-color: rgba(black, 0.5); instead of opacity: 0.5;
<style>
.category-product img {
display: block;
margin-left: auto;
margin-right: auto
}
.category-product img:hover {
background-color: rgba(black, 0.5);
}
</style>
<div class="category-product">
<img src="hinh/paris.jpg" data-img="product-image-1">
</div>
i have a side build like this
<body>
<header>blabla</header>
<main> some content </main>
<footer>blabla</footer>
</body>
i have to animate some part of the main content UNDER the header,
so i have put a div around the main and the footer and used it as like an anchor.
<body>
<header>blabla</header>
<div id="myId">
<main> some content </main>
<footer>blabla</footer>
</div>
</body>
and than i used this to translatey.
but after the animation of translatey there is some white space.
how to remove this white space after animation?
Transform only change the position of the element not the space he is taking at the time DOM load. See below snippet
.parent {
padding: 20px;
background: black;
}
.child {
height: 100px;
background: red;
transition: all .3s ease;
}
.parent:hover .child {
transform: translateY(-50px);
}
<div class="parent">
<div class="child"></div>
</div>
What you are looking for is use margin negative values to animate like below...margin affects the width of the element which it carrying at the time of DOM load Using margin parent and child will both move.
.parent {
padding: 20px;
background: black;
}
.child {
height: 100px;
background: red;
transition: all .3s ease;
}
.parent:hover .child {
margin-top: -50px;
}
<div class="parent">
<div class="child"></div>
</div>
I hope this will help you the difference between the translateY and margin-top
If anyone else is facing this, try removing box shadows
When you hover the bottom border should animate. The code is working in the first fiddle but not when I try to replicate it in the second fiddle.
#name:hover > .slider {
width: 100%;
}
.project-list .title a:hover > .slider {
width: 100%;
}
https://jsfiddle.net/0ou3o9rn/4/
https://jsfiddle.net/0ou3o9rn/9/
find working fiddle demo
give position relative to a tag.
<a href="#modal7" class="nombore">
<span>/07</span>
<span class="slider"></span>
</a>
.nombore{
position:relative;
display:inline-block;
transition: all 0.3s ease-out;
}
i have a div which is box and a 'p' element whose opacity is set to 0. when i hover over the div i want the 'p' elements opacity to change to 1. i have the following code . its looks proper to me but its not working. i could not figure out the problem with it. can some one help me. thanks in advance.
HTML:
<p class="se">Hover over the div element below</p>
<div class="box"></div>
css:
.se{
position: relative;
color:red;
opacity:0;
}
.se{
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
.box{
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;
}
box:hover + .se{
opacity:0;
}
jsFiddle http://jsfiddle.net/2f1k5yq4/
CSS selector +
Any element that is the next sibling of a previous element (that is: the
next child of the same parent)
.box {
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;
}
.se {
color: red;
opacity: 0;
position: relative;
transition: 1s linear;
}
.box:hover + .se {
opacity: 1;
}
<div class="parent">
<div class="child">
<div class="box"></div>
<p class="se">Hover over the div element below</p>
</div>
</div>
This is actually a kind of annoying problem with just CSS. I'd prefer using Javascript, especially if you already have jQuery loaded into your site.
But, that said, this can sort of be done in CSS. I'm going to assume you just want to show/hide an element, so I'll use display for the example rather than opacity, so modify as needed to use a transition.
The first problem you have is that you box:hover rather than .box.hover. The second problem is a bit more annoying. Abhitalks is correct that +, the adjacent sibling selector, only selects the next sibling, so you can't have the text above the div that will show it. If, however, you switch the order, moving the div above the text, it works. You could use some clever positioning, floating, etc. in order to make the order of their appearance different than their order in the markup, if you wanted.
.se{
display: none
}
.box{
width: 100px;
height: 100px;
background: red;
}
.box:hover + .se{
display: block;
}
<div class="box"></div>
<p class="se">Hover over the div element below</p>