I have a :after pseudo element to create a border bottom animation (border coming in from left to right), I used this technique several times however this time the border comes on top and not on the bottom for some reason, which I cant figure out. I tried using float and chaning the display type but it makes no different.
Html:
<div class="search">
<svg viewBox="0 0 485.213 485.213">
<path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
<path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
C318.424,257.208,257.206,318.416,181.956,318.416z"/>
<path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
</svg>
<span>Zoeken</span>
</div>
Css:
.search {
transition: 0.5s ease;
border-bottom: 2px solid transparent;
white-space: nowrap;
width: 120px;
height: 60px;
float: left;
display: block;
}
.search:after {
content: '';
display: block;
height: 2px;
width: 0;
background: $main-color;
transition: width .5s ease, background-color .5s ease;
float: none;
}
.search:hover:after {
width: 100%;
}
Here is a visual of the problem. The red line should be on the botttom.
In these cases I normally use position: absolute
.search {
white-space: nowrap;
width: 120px;
height: 60px;
position: relative;
}
.search svg {
height: 100%;
}
.search:after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 0;
background: red;
transition: width .5s ease;
}
.search:hover:after {
width: 100%;
}
<div class="search">
<svg viewBox="0 0 485.213 485.213">
<path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
<path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
C318.424,257.208,257.206,318.416,181.956,318.416z"/>
<path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
</svg>
<span>Zoeken</span>
</div>
I had to remove the float of the span element inside.
Related
I'm trying to find the CSS that makes the Div block underneath launch website animate on this website:https://district2.studio/project/dafi/ - but can't seem to replicate the animation
I find in the style sheet
<div class="text__mask-wrap" style="transform: matrix(1, 0, 0, 1, 0, 0);"<a class="post__title-launch d-inline-block" target="_blank" href="https://www.dafi.vn/">
<p class="mb-0">Launch Website</p>
<div class="launch__icon">
<span id="line-primary" class="line d-inline-block" style="width: 30px;"></span>
<span id="line-left" class="line d-block" style="opacity: 1; width: 0px;"></span>
<span id="line-right" class="line d-block" style="opacity: 1; width: 0px;"></span>
</div>
</a>
</div>
But can't find anything else in the html or css that relates back to this div block and animates it.
I was expecting some kind of transition but can't seem to find it.
I am building my first website and wanted to try out using this kind of div block animation.
<div class="text__mask-wrap" style="transform: matrix(1, 0, 0, 1, 0, 0);"><a class="post__title-launch d-inline-block" target="_blank" href="https://www.dafi.vn/">
<p class="mb-0">Launch Website</p>
<div class="launch__icon">
<span id="line-primary" class="line d-inline-block" style="width: 30px;"></span>
<span id="line-left" class="line d-block" style="opacity: 1; width: 0px;"></span>
<span id="line-right" class="line d-block" style="opacity: 1; width: 0px;"></span>
</div>
</a>
</div>
Whats expected is for the line to grow in width on mouse over, then mouse off it should grow from the middle and the 2 other lines should shrink to 0px in width
See the website launch website button for visual representation
you should use javascript code for this effect. if you jquery library added in your project, use this code:
$(".mb-0").hover(
function() {
var elWidth = $(this).width();
$(".launch__icon .line.d-inline-block").css({"width" : elWidth, "transition": "width 0.4s ease-out"});
$(".launch__icon .line.d-block").css({"width" : (elWidth/2), "opacity":"0"});
}, function() {
$(".launch__icon .line.d-inline-block").css({"width" : "30px", "transition": "width 0.4s ease-out", "transition-delay": "0.01s"});
$(".launch__icon .line.d-block").css({"width" : "0", "opacity":"1", "transition": "width 0.45s ease-out"});
});
and use below css:
.launch__icon {
width: 100%;
position: relative;
height: 2px;
text-align: center;
font-size: 0;
}
.launch__icon #line-primary {
display: inline-block;
width: 30px;
height: 2px;
background: #fff;
}
.launch__icon #line-left {
left: 0;
}
.launch__icon #line-left,
.launch__icon #line-right {
position: absolute;
width: 50%;
background: #fff;
height: 2px;
top: 0;
opacity: 0;
}
.launch__icon #line-right {
right: 0;
}
.mb-0,
.my-0 {
margin-bottom: 0!important
}
.d-inline-block {
display: inline-block!important;
}
They are using javascript, but you can use css for that, here is an illustration:
*{box-sizing: border-box}
/*
Since we want it to be centered i will use text-align center on the header which is just a wrapper
*/
header{
text-align: center
}
/*because the children will be absolute, we need to set the anchor's position to relative*/
a{
display: inline-block;
position: relative;
cursor: pointer;
}
.underline{
position: absolute;
bottom: 0;
height: 2px;
left: 50%;
width: 100%;
max-width: 32px;
margin-left: -16px;
background-color: black;
will-change: left,width;
/*We need an elastic ease here*/
transition: all .2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
a:hover .underline{
left: 0;
margin-left: 0;
max-width: 100%;
transition: all .2s ease;
}
a:before,
a:after{
content: "";
position: absolute;
bottom: 0;
height: 2px;
width: 0;
background-color: black;
will-change: width;
transition: all .2s ease;
}
a:before{
left: 0;
}
a:after{
right: 0;
}
a:hover:before,
a:hover:after{
width: 50%;
transition: all .2s .2s ease;
}
<header>
<a>
<p>Launch Website</p>
<span class="underline"> </span>
</a>
<header>
Can anyone assist me with the below coding? I am trying to add an image of a monitor with another image within the monitor that has an auto scrolling effect on mouseover.
I have tried the following from this post:
How to make image scrolling effect inside other image?
I did post there too then only noticed I should have posted if I had a solution so I re-posted as a fresh post.
CSS Code I am using:
.computer-empty {
overflow: hidden;
position: relative;
width: 540px;
}
.computer-screen {
overflow: hidden;
position: relative;
height: 265px;
width: 480px;
left: 30px;
top: 20px;
}
.screen-landing {
left: 0;
line-height: 0;
position: absolute;
width: 100%;
transition: all 6s;
-o-transition: all 6s;
-ms-transition: all 6s;
-moz-transition: all 6s;
-webkit-transition: all 6s;
}
.screen-landing:hover {
cursor: pointer;
margin-top: -1036px;
}
img {
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.computer-empty img.computer {
width: 100%;
}
HTML Code im using:
<a target="_blank" href="http://www.safidrivingschool.co.uk" class="">
<div class="computer-screen">
<div class="screen-landing">
<img src="http://www.webnificent.co.uk/wp-content/uploads/graphics/safidrivingschool_capture.png" alt="Safi Driving School">
</div>
</div>
<img class="computer" src="http://www.webnificent.co.uk/wp-content/uploads/graphics/apple_montior.png" alt="computer">
</a>
</div>
If I set position to absolute on .computer-screen, both images line up correctly but then the scroll effect won't work. If I set it as relative, the scroll effect works but then the images sit on top of one another.
See this link: Example: https://webnificent.co.uk/web-design/
A solution would be greatly appreciated.
This was pretty fiddly, but hopefully this will help?
Let me know if you have issues with this at all!
.computer {
position: absolute;
top: 5px;
width: 540px;
z-index: -1;
}
.computer-empty {
overflow: hidden;
position: relative;
width: 540px;
}
.computer-screen {
overflow: hidden;
position: relative;
height: 260px;
width: 470px;
left: 35px;
top: 21px;
}
.screen-landing {
left: 0;
line-height: 0;
position: absolute;
width: 100%;
transition: all 6s;
-o-transition: all 6s;
-ms-transition: all 6s;
-moz-transition: all 6s;
-webkit-transition: all 6s;
}
.screen-landing:hover {
cursor: pointer;
margin-top: -1036px;
}
img {
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
border: 0;
}
.computer-empty img.computer {
width: 100%;
}
<a target="_blank" href="http://www.safidrivingschool.co.uk" class="">
<div class="computer-screen">
<div class="screen-landing">
<img src="http://www.webnificent.co.uk/wp-content/uploads/graphics/safidrivingschool_capture.png" alt="Safi Driving School">
</div>
</div>
<img class="computer" src="http://www.webnificent.co.uk/wp-content/uploads/graphics/apple_montior.png" alt="computer">
</a>
See it on JSFiddle
Just a suggestion, it might be easier to use a computer screen with a totally black screen, such as this: Imac with Black Screen, just because in my example I had to fiddle with left, top, width and height just to make it fit into the white empty box of your computer screen. If you didn't have a specific box to fit into, you wouldn't have to worry about this & could just plonk your animated image scroll in the middle of the screen!
Just a thought!
How to transform block in CSS? Pseudo-elements is need or not? I try to create block look like block on the picture below. I can't create such block as on the picture below.
This is my code:
.transform_items {
width: 40%;
height: 80px;
position: relative;
margin: 0 auto;
perspective: 600px;
margin-top: 150px;
left: 50px;
}
.block,
.block::before{
display: block;
position: absolute;
margin: 0 auto;
}
.block {
border: 5px solid transparent;
width: 350px;
height: 60px;
}
.block::before {
content: '';
border: 5px solid #52B352;
transform: rotateY(30deg);
top: -5px;
right: -5px;
bottom: -5px;
left: -35px;
}
.block a {
font-size: 24px;
}
<div class="transform_items">
<div class="block"><a>Block</a></div>
</div>
The expected result:
If you can use SVG (1), it could be like this
codePen
svg #block {
stroke: orange;
fill: none;
stroke-width: 5
}
svg text {
font-size: 25px
}
<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84">
<polygon id="block" points="33,13 245,24 245,60 29,64 " />
<text x="100" y="50">BLOCK</text>
</svg>
You can also save the svg code as a .svg file,without the text element, and use it as background-image for the div that contains your text
Read this to learn how to use svg in different ways: https://css-tricks.com/using-svg/
(1) Browser support for SVG is a little better than browser support for transform, caniuse: SVG
I want to reduce element size a bit as an effect, when it is hovered over with a mouse. However, this looks buggy because as the element reduces in size, the "hover area" gets smaller as well, which can result into the element not being hovered anymore, which further results into this "size flickering".
Is there a proper way to implement element size reduction on hover, while keeping the hover area size the same? Without extra elements?
Here is a fiddle: https://jsfiddle.net/ahvonenj/88f5by59/
Required code for fiddle linking:
#di
{
position: absolute;
left: 15px;
top: 15px;
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di:hover
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
Wrapping it in a div would be better, as commented. But if adding no other elements is a must, you could work with pseudo elements.
Make the visible part a pseudo element (like :before), and keep the main one just for hovering:
TIP: If you want the transition effect on both mouse over and out, set the property to the main css rule, not to the hover one
#di
{
position: absolute;
left: 15px;
top: 15px;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di:before {
content: "";
display: block;
background-color: #2980b9;
width: 100px;
height: 100px;
}
#di:hover:before
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
<div id = "di">
</div>
You can wrap the div inside a container and "bind" the hover event to the parent.
P.S obviously it is a solution with adding other elements.
#container
{
position: absolute;
left: 15px;
top: 15px;
box-sizing: border-box;
}
#container, #di{
width: 100px;
height: 100px;
}
#di{
background-color: #2980b9;
}
#container:hover #di
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
<div id="container">
<div id="di">
</div>
</div>
Yep, this is your answer. You have to add one more element. See this fiddle:
https://jsfiddle.net/vwy4utf5/
html:
<div id = "di">
<div id="diin">
</div>
</div>
CSS
#di{width:101px; height:101px; cursor:pointer; position: absolute;
left: 15px;
top: 15px;}
#diin
{
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
transition: all 200ms linear;
}
#di:hover > div
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
I tried it using Jquery, didn't specified by OP but I guess it can help somebody.
So changed css to make parent positioning of new parent:
#di {
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di_parent {
padding: 0;
overflow: hidden;
position: absolute;
left: 15px;
top: 15px;
}
#di_parent:hover > DIV {
width: 50px;
height: 50px;
transition: all 200ms linear;
}
Then added some JQuery to create a container to each object to maitain size as is suggested above.
$('#di').each(function(i, v){
var o, p;
o=$(v);
p=$('<div id="di_parent"></div>');
p.css({height:o.outerHeight(),width:o.outerWidth()});
o.after(p);
p.append(o.detach());
});
Working fiddle:
https://jsfiddle.net/88f5by59/11/
$('#di').each(function(i, v){
var o, p;
o=$(v);
p=$('<div id="di_parent"></div>');
p.css({height:o.outerHeight(),width:o.outerWidth()});
o.after(p);
p.append(o.detach());
});
#di {
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di_parent {
padding: 0;
overflow: hidden;
position: absolute;
left: 15px;
top: 15px;
}
#di_parent:hover > DIV {
width: 50px;
height: 50px;
transition: all 200ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id = "di">
</div>
Hope it helps!
I have the image which has filled content and transparent content. I want to get background-color but only for filled content (ignores transparent) Is it possible? Can I do something like that instead?
My project: can be seen here
$("#hairbutton").click(function() {
var haircolor = $('#haircolorinput').val();
$(".img-wrap#hair img").css("background-color", haircolor);
});
$("#facebutton").click(function() {
var facecolor = $('#facecolorinput').val();
$(".img-wrap#face img").css("background-color", facecolor);
});
#-webkit-keyframes head {
from {
top: 0px;
}
to {
top: 1px;
}
}
#keyframes head {
from {
top: 0px;
}
to {
top: 1px;
}
}
#head {
position: relative;
-webkit-animation: head 1.5s infinite;
animation: head 1.5s infinite;
}
.img-wrap {
width: 153px;
height: 78px;
overflow: hidden;
width: 90px;
height: 60px;
clear: both;
}
.img-wrap img {
width: 90px;
height: 60px;
background-color: green;
}
input {
padding: 5px;
border-radius: 5px;
border: 2px solid black;
float: left;
height: 18px;
}
input:focus {
outline: 0;
}
#go {
padding: 5px;
border: 2px solid black;
width: auto;
display: table;
border-radius: 5px;
float: left;
height: 10px;
margin-left: 5px;
cursor: pointer;
height: 33px;
}
#face {
position: relative;
bottom: 35px;
left: 35px;
}
.form {
float: left;
clear: both;
}
button {
position: relative;
left: 5px;
top: 5px;
}
.clear {
clear: both;
}
<div class="form">
<input id="haircolorinput" name="haircolor" type="text" placeholder="Hair HEX">
<button id="hairbutton">Change</button>
</div>
<div class="form">
<input style="margin-top: 5px; margin-bottom: 50px;" id="facecolorinput" name="facecolor" type="text" placeholder="Face HEX">
<button id="facebutton">Change</button>
</div>
<div class="clear"></div>
<div id="head">
<div class="img-wrap" id="hair" style="z-index: -100;">
<img src="http://i.imgur.com/mz3GRLl.png" alt="" />
</div>
<div class="img-wrap" id="face" style="z-index: 100; width: 36px; height: 36px;">
<img src="http://i.imgur.com/DiHXscR.png" alt="" style="width: 36px; height: 36px;" />
</div>
</div>
To answer your question No, but you can sett a background-color to and image so that the background shows on the transparent part of you image instead:
tl;dr There are multiple ways of changing parts of an image/object. I think the easiest way is with an svg embedded image/object. and setting the fill of that element with css.
Fidely dee
PNG example
CSS
#yourimage:hover {
background-color: blue;
}
The setback of using the png solution:
This will fill any background color. So to avoid having blue background around an image usually you have a white or any other solid background on the image. See fiddle for example.
Canvas
Its fully possible setting the the strokeStyle in canvas.
Yay super easy right? Well canvas does not have objects or elements it only renders what is given to it. So in the code that draws you shape you have to define what color it takes before rendering. Maybe one day there will be elements in canvas?
SvgRecommended
Svg elements can have an id! So we can simply make an svg:
html
<svg width="100" height="100">
<circle id="favcirc" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
<svg/>
And access the fill value of the element!
css
#favcirc {
fill = "#F00"
}
ps if you lucky and only have one color you can hue-rotate it with filter:
Filter demo