How can i change the size of a container on hover so that it looks like in the Picture. Is it possible with only css/Smarty?
Here is the Link to the Picture: http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg
You can create that zoom effect that zooms over other elements using transform: scale(). Here's an example.
img {
max-width: 200px;
transition: transform .5s;
transform-origin: 50% 0;
background: #fff;
}
footer {
background: #111;
color: #fff;
padding: 2em 0;
}
.shirts {
text-align: center;
}
a:hover img {
transform: scale(1.2);
}
<div class="shirts">
<img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg">
<img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg">
</div>
<footer>footer</footer>
Related
I would like to bring "Hello world" inside a white container from left to right but I don't want the container to move.
Need to move just text and the text flashes from left to right like a quick slider movement pleasing to the eye.
How to achieve this using CSS animation?
body {
background: red
}
.container {
background: white;
color: black;
padding: 20px;
margin: 20px;
}
<div class="container">
<h1>Hello world</h1>
</div>
for making the animation use #keyframes
and for making the text not visible if outside use overflow
forwards for saving the last keyframes of animation.
body {
background: red
}
.container {
background: white;
color: black;
padding: 20px;
margin: 20px;
}
.container {
overflow: auto; /* use "hidden" instead if it shows a unnecessary scrollbar. */
}
h1 {
animation: toRight 0.2s ease-in forwards;
transform: translateX(-50%);
}
#keyframes toRight {
100% {
transform: translateX(0);
}
}
<div class="container">
<h1>Hello world</h1>
</div>
I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj
The final effect is supposed to look like on in this example:
https://jsfiddle.net/1uubdtz6/
but I am not sure why doesn't it work with these colors.
Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill
body {
height: 100vh;
width: 100%;
position: relative;
background-color: #510035;
margin: 0 auto;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
}
.half-pager {
width: 50%;
height: 100%;
position: absolute;
display: inline-block;
overflow: hidden;
text-align: center;
}
.half-pager-dark {
background-color: #510035;
}
.half-pager-light {
right: 0;
background-color: #E8E8E8;
float: right;
}
.lp-header {
position: absolute;
}
.lp-header {
color:transparent;
mix-blend-mode: difference;
-webkit-text-stroke: 3px rgb(126, 124, 133);
z-index: 1;
}
.lp-header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:
body {
margin: 0;
--c1:#510035;
--c2:#E8E8E8;
}
body:hover {
--c1:red;
--c2:blue;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
margin: 0;
}
.first {
background:var(--c1);
-webkit-text-stroke: 3px var(--c2);
}
.second {
background:var(--c2);
-webkit-text-stroke: 3px var(--c1);
clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}
.lp-header {
position:absolute;
top:0;
left:0;
right:0;
min-height:100vh;
box-sizing:border-box;
color: transparent;
z-index: 1;
padding: 50px;
text-align: center;
transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
I'm trying to scale a card element when a user hovers over it by using only the transform of the card.
However I'm noticing that in a lot of cases when the card is hovered, the child elements will jitter in some way, i.e. some letters jumping up in height for a split second.
Here's an example of the effect that i keep experiencing.
https://codepen.io/andrewmumblebee/pen/OrBGzm
You'll notice that the S of TEST, jumps in height during the transition.
I've managed to get a completely smooth transition working before, but this was absolutely positioned.
https://codepen.io/andrewmumblebee/pen/REevdB
After removing the absolute positioning, etc. it still is smooth, so I'm assuming it's something to do with having multiple child elements.
Here's the important code, the full code can be found on the first Codepen link.
<div class="container">
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Godot_icon.svg" />
<div class="text">
test
</div>
</div>
</div>
body {
background: #478cbf;
}
.container {
margin: 50px auto;
width: 200px;
}
img {
width: 200px;
height: 200px;
}
.card {
width: 250px;
height: 300px;
background: linear-gradient(#444, #333);
transition: all 0.3s;
text-align: center;
padding: 30px;
will-change: transform;
transform: scale(1);
box-shadow: rgba(#000000, 0.2) 5px 5px 10px;
}
.text {
font-size: 50px;
text-transform: uppercase;
color: white;
font-family: arial;
will-change: transform;
text-align: center;
}
.card:hover {
transform: scale(1.1);
box-shadow: rgba(#000000, 0.2) 10px 10px 10px;
}
I'm trying to reveal text from the center against an element that has a background image. If I make the background of the animation a solid color, then that solid color appears around the text until the animation is done. If I put the same background image behind the text as is the behind the containing element, then a different version of that same image appears around my text. Any suggestions?
html:
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<h4 class="showhead">My heading</h4>
</div>
</div>
css:
#the-wall {
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.chapter-hed h4 {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
}
.chapter-hed h4:before {
left:0;
}
.chapter-hed h4:after {
right:0;
}
.chapter-hed h4:after,.chapter-hed h4:before {
position:absolute;
content:"";
height:100%;
height: 109px;
/*background:black;*/
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.showhead:after, .showhead:before {
animation: revealText 4s;
animation-fill-mode:forwards;
}
#keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
I have added 2 wrappers for your class. One slides to the left, the other to the right. The net effect is that the element keeps centered, and is revealed progressively
#the-wall {
background-image: url(http://lorempixel.com/400/200);
background-position: center;
background-size: cover;
background-color: black;
}
.showheadctn1,
.showheadctn2 {
width: 100%;
overflow: hidden;
}
.showheadctn1 {
transform: translateX(50%);
}
.showheadctn2 {
transform: translateX(-100%);
}
.showhead {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
width: 100%;
transform: translateX(50%);
}
.showheadctn1,
.showheadctn2,
.showhead {
animation: revealText 4s infinite;
animation-fill-mode: forwards;
}
#keyframes revealText {
0% {}
100% {
transform: translateX(0%);
}
}
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<div class="showheadctn1">
<div class="showheadctn2">
<h4 class="showhead">My heading</h4>
</div>
</div>
</div>
</div>
You can make 3 layers.
The bottom of the image you want.
In between the text.
The front again the image, but this time split in half.
And you do the same animation you have now but backwards. (On the third layer, logically)
Sure there is a more appropriate solution, but it is the first thing that has happened to me in my head
I have been asked to create a responsive application, the layout / theme of the application has a angled shapes (see image below). I've tried using CSS3 skew and rotate however these property values manipulated the content as well as the shape which is not what i want. I would just like the shape to have what appears to be a 90 degree angle and the text to lay on top of the shape.
Can this be accomplished using CSS3?
Rather than using skew and rotate on the container itself, you can use an ::after rule to create an empty div to rotate.
jsfiddle here: http://jsfiddle.net/carasin/ndb1koca/1/
html:
<div id="banner-wrap">
<div id="banner"><h1>Text here</h1></div>
</div>
css:
#banner-wrap {
position:relative;
}
#banner::after {
content: "";
display:block;
background: orange;
width:200%;
height:500px;
position:absolute;
left:-30%;
top:-60%;
z-index:0;
transform: rotate(13deg);
}
h1 {
font-family:sans-serif;
color:#fff;
text-transform:uppercase;
font-size:3em;
z-index:1;
position:relative;
padding:40px 30px ;
}
I've tried using CSS3 skew and rotate however these property values
manipulated the content as well as the shape which is not what i want.
In order to prevent the content from being affected you could simply skew() the content In the opposite direction as well - Example.
Used properties
transform
transform-origin
overflow
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
h1, h2 {
text-transform: uppercase;
font-size: 6vw;
}
h2 {
font-size: 4vw;
}
.wrapper {
overflow: hidden;
}
header {
background-color: gold;
height: 40vw;
line-height: 40vw;
-webkit-transform: skewY(10deg);
-ms-transform: skewY(10deg);
-o-transform: skewY(10deg);
transform: skewY(10deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
}
header h1 {
-webkit-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
padding-left: 1em;
color: white;
}
.search {
background-color: lightgray;
padding: 1em;
margin: 0 1em;
}
<div class="wrapper">
<header>
<h1>Hello World</h1>
</header>
</div>
<div class="search">
<h2>Search</h2>
</div>
There's an upcoming CSS property that allows you to create this effect without hacks. It's called clip-path, though presently (Oct 2014) you need to use -webkit-clip-path to avoid collisions with an existing SVG CSS property. The two properties will be merged soon into a single clip-path.
This works today in Chrome, Safari, iOS 8 and Opera (Firefox will follow soon, without -webkit- prefix, obviously):
#banner {
background: yellow;
width: 600px;
height: 300px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%);
}
Since the polygon uses percentages, the clipping shape will scale with the container whatever dimensions it has -- good for responsive design.
Your use case means that this solution can degrade gracefully to a simple rectangle.
Learn mode about clipping as part of CSS Masking.