I would quite like to have captions that fade in at the bottom of the image. Whilst debugging I have found that div.desc is where it should be, as in, where it should appear, but no transition so to speak.
It could well be that the syntax for the way a div.item should hover is not correct.
Can someone help guide what I am doing wrong.
CSS:
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
a:hover .item {
opacity: 1;
left: 0;
z-index: 500;
}
With my HTML:
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="/images/demo.jpg" alt="Find" width="535" height="535">
</a>
<div class="desc"><div class="item">This is the caption</div></div>
</div>
</div>
It looks like you're trying to transition the opacity on .desc, no?
If so, the reason it doesn't work is because you've selected the wrong element in your :hover code. You'll want to write this instead of what you have:
a:hover + .desc
The reason is that neither .item nor .desc is a child of your anchor tag. .desc is an adjacent sinling of it, and using + in CSS selects them. Also, you want to transition the elements that have properties to transition between (in this case, only .desc has its opacity changed initially).
Related
I know this should be a no-brainer, but for some reason I really just cannot figure out how to link my CSS transitions... I am attaching a website with widgets that act how I want mine to act: https://kion.io/resources
I love that when you hover on the widget, all CSS transitions happen at the same time over that one div/a href
I am attempting to do the same, and I have written all of my code but I have to hover individually over my elements... this is for a site that is not yet done, but I will post a link to the page that I am referring to. Specifically focusing on the widgets in the middle of the page. They scale up, BUT I want the arrows to move to the right when you hover over the entire div like in Kion's site. I can only figure out how to make them move when you hover over them specifically.
My site: https://cloudshape.net/cloudshape/
My code:
/*WIDGETS*/
.card a {
text-decoration: none;
color: black;
}
.card a:hover {
color: black;
}
.card {
font-family: 'helvetica', sans-serif;
margin: 25px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background-image: url('https://cloudshape.net/wp-
content/uploads/2022/02/clear-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: background-image 2s ease-in-out;
}
.white-square {
width: 310px;
height: 330px;
background-color: white;
border: 2px solid black;
border-radius: 6px;
box-shadow: 0 0 10px 2px #202020;
padding: 15px;
text-align: center;
transition: transform .4s ease-in-out, border .4s ease-in-out;
}
/*WIDGET ARROW BUTTONS*/
.btn img {
width: 80px;
margin-top: -20px;
margin-left: 120px;
}
.btn img:hover {
margin-left: 130px;
}
.btn img {
transition: margin-left .7s ease;
}
<div class="card">
<a href="">
<div class="white-square">
<span class="icon"><img alt="security" src="https://cloudshape.net/wp-content/uploads/2022/02/shielddot-color.png"/></span>
<h5>Dev(Sec)Ops/SRE<br>Architecture & Modernization</h5>
<p>Short for development, security and operations — automates the integration of security at every phase of the software development lifecycle.</p>
<span class="btn"><img alt="button" src="https://cloudshape.net/wp-content/uploads/2022/02/arrow.png"/></span>
</div>
</a>
</div>
You could use this CSS rule to target your arrow when your white square is hovered :
.white-square:hover .btn img {
margin-left: 130px;
}
So I have the following situation for a button I am making:
<i class="fas fa-angle-left"></i> Previous
which can be seen fully on https://jsfiddle.net/pre3xzL5/ (<i>-tag from Font Awesome).
Basically I want the text inside the button to be centered from the beginning (it isn't now), and then when I hover the arrow (<i>-tag) appears and comes from the middle to the left, and then the next should also go from the middle (centered as it should be) at moved a bit to the right. However, now, the next is starting at the place where it should be when hovered. It makes sense since the <i>-tag is taking up space, but that's the question: Can I correct this ?
I have done it using margins instead. But I've read that using margins for transitions and such is bad practice, and not good for performance - hence the try with translate.
These two transition statements are the only ones you need, set initially on the relevant elements. The position absolute changed to position relative on hover gets you the effect you want.
.button
{
transition: all 0.15s ease-in-out;
i
{
position:absolute;
transition: all 0.15s ease-in-out;
}
}
.button:hover
{
i
{
position:relative;
}
}
html:
<i class="fas fa-angle-left"></i> Previous
scss:
.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;
i {
position:absolute;
opacity: 0.0;
transition: all 0.15s ease-in-out;
transform: translateX(.5em);
}
}
.button:hover {
background: red;
border: 1px black solid;
i {
position:relative;
transform: translateX(0px);
opacity: 1.0;
}
}
https://jsfiddle.net/pre3xzL5/1/
I have this css transition, I want to make disappear a div right to left and that the width is reduced little by little:
.disapear {
transition: width 1s ease-in;
width: 0px;
}
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
}
the effect is not animated, and the element disappears abruptly
this is my html:
<div class="img-thumb">
<img src="myimage.jpg">
</div>
the class .disapear is added after clicking on the element
what would be the right way to do it?
As your element is inline-block, I would animate the max width. js below is just to add your disapear class (you haven't shown how it gets added)
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
transition: max-width 1s ease-in;
overflow:hidden; /* add these 2 */
max-width:100%; /* may want to change this to be width of your image to remove the delay from the beggining of the animation */
}
.disapear { /* this needs to appear after the above style */
max-width: 0px;
border: 0; /* hide border */
}
<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">
<img src="http://via.placeholder.com/100x100">
</div>
I'm trying to create an effect with list items in an unordered list.
Basically, anytime one hovers over the list, the size adjusts 2px in padding. While this properly it is also effecting the overall dimensions of the list item, thus pushing other list elements to the right and pushing the div beaneath down 2px. Anyone know of a way to remedy this issue?
All I want the list item to do during a hover is to increase padding by 2px without effecting any other elements around it.
You can find the code on jsfiddle here as well as below:
HTML
<div id="info">
<ul class="projects">
<li class="site wmhr">$
<p>What's My Hourly Rate</p>
</li>
<li class="site proud">P
<p>PROUD</p>
</li>
<li class="site mdy">M
<p>Manda Dougherty Yoga</p>
</li>
<li class="site rr">R
<p>Responsive Resume</p>
</li>
<li class="site dp">D
<p>designpairs (in progress)</p>
</li>
</ul>
</div>
CSS
.projects {
margin: 0;
padding: 0 0 50px 0;
}
.projects li {
display: inline-block;
list-style: none;
width: 70px;
height: 70px;
margin: 50px 20px 20px 0;
border: 4px solid #555;
border-radius: 50%;
font-size: 2em;
text-align: center;
line-height: 70px;
background: #414141;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.projects p {
font-size: .850rem;
line-height: 1.500em;
}
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
}
.projects li a {
font-family:'Montserrat', sans-serif;
color: #fff;
text-decoration: none;
}
.wmhr:hover {
background: #66CC6E;
border: 4px solid #57ac5e;
}
.proud:hover {
background: #5882c2;
border: 4px solid #4b6da2;
}
.mdy:hover {
background: #fec601;
border: 4px solid #ddad03;
}
.rr:hover {
background: #797b96;
border: 4px solid #606176;
}
.dp:hover {
background: #475161;
border: 4px solid #38404d;
}
If you don't want the item to move, then you have to counteract the padding with a reduction in some other dimension or change the layout structure to not use inline layout.
Here's a version of your jsFiddle that uses a reduction in the margin to counteract the increase in the padding. The hovered item gets larger, but the other items don't move.
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
margin: 48px 18px 18px 0;
}
Note, I also changed the default left margin to be 2px so I could reduce it to 0 here as I hate using negative margins (they sometimes cause objects to overlap which can introduce unexpected behaviors).
http://jsfiddle.net/jfriend00/6jjcg/
I would use a CSS transform property rather than adding padding and adjusting around it.
.projects li:hover {
transform: scale3d(1.2,1.2,1);
}
Using scale3d rather than simply scale because scale3d uses hardware acceleration. You'll also want to add -webkit and -moz prefixes for better compatibility.
jsFiddle example
I've wrote a simple sticky-notes page. Every note is a list item containing content in paragraph, delete button in span and an image with tooltip. Here`s a piece of HTML containing one note:
<ul id="wall" class="ui-sortable">
<li id="note1">
<a href="#">
<span class="del">x</span>
<p>1221212 23 23 3322 3223</p>
<img src="..."/>
<div class="tooltip">Tooltip</div>
</a>
</li>
.
.
.
</ul>
And here`s the css:
ul li a
{
outline: none;
text-decoration: none;
display: block;
height: 200px;
width: 200px;
-moz-transition: -moz-transform 0.2s ease;
}
ul li a:hover
{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
font-size: 105%;
position: relative;
}
ul li p
{
overflow: hidden;
margin: 0;
padding: 20px;
-moz-user-select: none;
font-size: 120%;
font-style: italic;
}
.del
{
-moz-user-select: none;
font-size: 22px;
position: absolute;
left: 183px;
float: right;
display: none;
padding: 2px 5px 0 0;
}
The issue is, that with this code whole note scales ok, but then after scaling is complete the text (both in p and span) resizes itself a bit (I don't know, about 1-2px) and it looks really bad. Removing -moz-transition from 'ul li a' fixes the issue, but then scaling isn't smooth at all. Has any of you encountered similiar issue?
I've tried this also:
-moz-transition: -moz-transform 0.2s ease;
-moz-transition: font-size 0.2s ease;
But this doesn't help. Is there any way to use css transformation scale without the 'jumping' text? I'd prefer not to use jQueryUI for now, it's too heavy for using it only for this simple task.
Here`s jsfiddle for this:
Notes
Of course you have to run it from firefox to observe the issue. On chrome it works ok AFAIK.
UPDATE: I've to run it under FF8.0, but I've installed 13.0.1 and this glitch is also visible there.
just change the font size 105% to 100%.
ul li a:hover
{
-moz-box-shadow: 10px 10px 7px black;
-webkit-box-shadow: 10px 10px 7px black;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
font-size: 100%;
position: relative;
}