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;
}
Related
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
I have a page with a jumbotron header. the page is - http://www.mzungu.co.il/article.php?id=10
The size of the jumbotron is 40vmax:
.jumbotron {
background-image:url('images/<?php echo $article_cover ?>');
background:repeat:no-repeat;
background-size: 100%;
height: 35vmax;
background-position:center center;
color:#fff;
text-shadow:2px 2px 4px black;
}
the code i have tried so far is:
.jumbotron h1,
.jumbotron .h1 {
position:relative; top 30vmax;
}
with many different variations of position (fixed, absolute, etc) and with "margin top". could not find something that would work for both pc and mobile view.
Also, i wanted to create a background just for the text part, like in this pic
this maybe can help you out.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image
and for the background of the text you may do it like this.
.h1 {
margin: 0 auto;
width: 100px;
h1 {
padding: 6px;
display: block;
border-radius: 30px;
background: rgba(192,192,192,.7);
box-sizing: border-box;
font-size: 22px;
line-height: 1.8;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 1s ease-out;
position: relative;
}
}
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).
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
How can I override the default popup for a required field on a HTML5 form?
Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup)
The HTML
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
NOTE: You must view this with a HTML5 browser like Google Chrome or FireFox.
This link doesn't solve my question but it might make someone think outside of the box:
http://www.the-art-of-web.com/html/html5-form-validation/
http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html
It's impossible to change the validation style with only HTML5/CSS3.
It's part of the browser. The only attribute I figured out to change is the error message by using this example:
document.getElementById("name").setCustomValidity("Lorum Ipsum");
But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshims and, of course, some CSS to style the popups.
I found that very useful example in this bug post titled Improve form validation error panel UI.
I think this is the best solution you can find and only way to override the basic (ugly) error panel.
Regards.
I'm not sure why, but ::-webkit-validation-bubble-message { display: none; } wouldn't work for me.
I was able to get the desired result (tested in FF 19, Chrome Version 29.0.1547.76 m) by preventing the default behavior of the invalid event, which does not bubble.
document.addEventListener('invalid', (function(){
return function(e){
//prevent the browser from showing default error bubble/ hint
e.preventDefault();
// optionally fire off some custom validation handler
// myvalidationfunction();
};
})(), true);
Hope that helps others - I looked everywhere for this.
For webkit, you can use ::-webkit-validation-bubble-message. For example to hide it:
::-webkit-validation-bubble-message { display: none; }
There are also:
::-webkit-validation-bubble-arrow-clipper{}
::-webkit-validation-bubble-arrow{}
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}
Update: Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050
For firefox you can experiment with :-moz-placeholder {}.
The current default email validation is currently one of the ugliest things I have ever seen Google design!
However it seems to be contained in a standard div so you can make some changes to it, if you remember to then reset these values.
I've found you can alter the background, font size and colour, border and shadow, like so
div {
background: rgba(0,0,0,0.8);
color: #333;
font-size: 11px;
border: 0;
box-shadow: none;
}
If you then overwrite these for divs inside the html tag, then only the validation is ultimately affected.
html div {
background: rgba(0,0,0,1);
color: #000;
font-size: 12px;
}
Unfortunately some of the key attributes that you'd want to change, such as margin and font-weight, cannot be altered.
NB. This technique currently only works for Chrome (12), i.e. not work for Firefox 4, Opera 11 or Safari (Win 7).
Appended a class to the input type. and displayed message there .Hope that helps after little customization. working codepen:
document.querySelector('#frm').addEventListener('submit', e => {
e.preventDefault();
e.currentTarget.classList.add('submitted');
});
body {
font-family: Helvetica, sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
width: 100%;
height: 100vh;
background: #ffa500;
}
form > div {
position: relative;
margin-bottom: 10px;
}
.theTooltip {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity, visibility;
max-width: 250px;
border-radius: 5px;
background-color: rgba(0,0,0,0.7);
padding: 15px;
color: #fff;
box-sizing: border-box;
display: inline-block;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(15%, -50%);
transform: translate(15%, -50%);
top: 50%;
left: auto;
right: auto;
bottom: auto;
visibility: hidden;
margin: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
z-index: 100;
}
.theTooltip:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
margin-top: -10px;
left: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(0,0,0,0.7);
}
label {
display: inline-block;
vertical-align: center;
}
input {
background: #fff;
border: 1px solid transparent;
cursor: pointer;
display: inline-block;
overflow: visible;
margin: 0;
outline: 0;
vertical-align: center;
text-decoration: none;
width: auto;
border-radius: 3px;
cursor: text;
padding: 7px;
}
input:focus,
input:active {
outline: none;
}
.submitted input:invalid {
border: 1px solid #f00;
}
.submitted input:invalid ~ .theTooltip {
visibility: visible;
opacity: 1;
}
.submitted input:valid ~ .theTooltip {
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
transition: opacity 0.3s, visibility 0s 0.3s;
}
<form id="frm" action="action">
<div>
<label>Email</label>
<input type="email" required="required"/><span class="theTooltip">Invalid email</span>
</div>
<div>
<button formnovalidate="formnovalidate">OK</button>
</div>
</form>
I understand that this is a rather old question but I have found this library that I think this may be beneficial to other that find this.
http://afarkas.github.io/webshim/demos/index.html