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;
}
Related
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 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.
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>
Hi I am trying to rotate an image when i hover over a div using Rotate and Transform-Origin. It was works when the image is centered in the div but when i change the vertical position of the image and make the relevant changes to the Transform-origin values the image still rotates but is slightly off center. Any ideas would be appreciated.
jsfiddle here (only seems to work in firefox)
http://jsfiddle.net/boyle/U3yLk/
html
<div class="box">
<div class="c">
<img class="pic" src="p.png"/>
</div>
css
.box{
width: 200px;
height: 300px;
background-color: #4781AA;
display:block;
}
.c{
width:200px;
height:300px;
display:block;
transition: all 1s ease;
}
.c:hover{
transform: rotate(180deg);
transform-origin: 100px 150px;
}
.pic {
position: relative;
left:50px;
top: 100px;
}
This also only seems to work in Firefox!
Cheers
try this
.transform{
transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
}
I found this post How to create sliding DIV on click?
But all the answers are Jquery methods. Is there any way to create this with PURE CSS?
I have a couple other things in mind as well...
What can I add to make the slide down div stay put when scrolling
Change the link that triggers the animation to "Close" in order to make the div slide back up
Here is a link to the example in that post//
http://shutterbugtheme.tumblr.com/
I've also tried googling but the only results are jquery methods...
It can be done, although it's a little bit of a hack. The two elements that retain state (referred to in CSS as :checked) are the checkbox and radio button element. So if you associate a checkbox with a label by using a for attribute and add a div, you can get a result by reading the status of the (hidden) button:
<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>
And the CSS:
input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }
This is impossible in pure CSS to recognise a click. You can do it with :hover and a transition, but that is as close as you're going to get without javascript.
.hover
{
cursor: pointer;
position: relative;
z-index: 1;
}
.slide
{
position: absolute;
top: 0;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:hover + .slide
{
top: 50px;
}
http://jsfiddle.net/Kyle_/MaMu9/1/
Be aware though that transitions are CSS3 and will not work in IE<9 and older versions of better browsers.
Edit: after another answer was posted using the :focus property in CSS: it is possible with one caveat: you have to click outside of the element that makes it slide down to make it slide up, otherwise it works fine.
Be aware that the element must have tabindex='1' (or any number that makes sense depending on where the element is in the document) for this to work.
.hover:focus + .slide
{
top: 50px;
-webkit-transition: top 1s;
}
http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/
You can recognize a 'focus' event on an element and act upon it using a CSS transition.
Here's an example which will move a div 50px down when clicked
Markup
<div tabindex='1' id='box'></div>
CSS
#box {
background-color:#3a6d90;
width:100px; height:100px;
transition: margin-top 2s;
-moz-transition: margin-top 2s; /* Firefox 4 */
-webkit-transition: margin-top 2s; /* Safari and Chrome */
-o-transition: margin-top 2s; /* Opera */
}
#box:focus {
margin-top:50px;
outline:0;
}
Working example: http://jsfiddle.net/NBHeJ/
This is a good example of how to get started. You can see at the bottom, they post the source for the animate function they use, although this is javascript.
sliding-js-generic
If you want pure css, I'd use ws3schools has been excellent resource for many years, though be aware that a lot depends on browser support as to whether the effect you want will work or not.
w3schools-css
Basic structure to make the effect they have, you just need to work along the lines of two divs within the body, at the top hidden and the container visible, and run the animation of the hidden div to display pushing the other div down, keeping them both inline.
<body>
<div id="hidden-div"></div>
<div id="main-content-div"></div>
</body>
This can be done using the target pseudo class to detect the click.
Set the button href to the id of the sliding div.
The slide down can then be done by setting the height of the sliding div on the slidingDiv :target class using a css3 transition on the height.
I don't think there's a way for the original button to change its href to close the sliding div using pure css, however you could always add a close button on the sliding div to close it.
This close button works by adding the same transition on the sliding div class.
Here is a WORKING DEMO.
Enjoy.
Run This Code.
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
background: tomato;
color: #FFF;
font-family: arial;
-webkit-transition: background-color 0.1s, color 0.1s;
}
label:hover {
background: #blue;
color: #blue;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: tomato;
margin-top: 10px;
color: #FFF;
}
input:checked + .test {
height: 100px;
}
<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="test">
<p>I am some hidden text</p>
</div>
Easy:
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden
}
.slide-up > div, .slide-down > div {
margin-top: -25%;
transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {
margin-top: 0;
}
Working example:
https://jsfiddle.net/webarthur/3ep33h5s/
Another way to do the same thing:
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
Working example: https://jsfiddle.net/webarthur/3ep33h5s/1/