Menu
I've got some icons that expands when I hover them:
.icon { width: 128px; height: 128px; background: url(icons.png) no-repeat; background-position: left top; -webkit-transition: width .2s; } .icon.icon1:hover { width: 270px; backgorund-position-x: -128px; } When I hover an icon it's width is changed, so because of the -webkit-transition is will expand the icon. The way it expands is from left to right which is good for .icon1 and .icon2, but it should be the other way around (right to left) with .icon3 and .icon4.
762
Easy! Add one line of code to the element that you wish to resize. float: right; This is basically the same as the accepted answer, but you don't have to mess with absolute positioning and then having a relative container.
Just position the content relative to the right edge to make it be hidden from the left. Depending on what you have in the div, you might need another container (div) inside it, that you style using position: absolute; right: 0 .
The border-left-width property sets the width of an element's left border. Note: Always declare the border-style or the border-left-style property before the border-left-width property. An element must have borders before you can change the width.
Use position:absolute and set right:0 and top:0
.icon{ width: 128px; height: 128px; background: url(icons.png) no-repeat red; background-position: left top; -webkit-transition: width .2s; position:absolute; top:0; right:0; } .icon:hover{ width:250px } DEMO
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
