Maintain padding when scaling image inside fixed size container - html

I'm trying to create a zoom effect by using CSS transition to grow an image inside a fixed size container on hover. The container frame has a border and padding, and I would like them to stay when the image grows. The problem is that when it grows, the padding on the right and bottom disappear.
Here is the CSS code:
.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}
.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}
And here the HTML code:
<div class="videoframe"> <img src="image.jpg" /> </div>
Is there any way to maintain the 10px padding all the way around the image when it changes size?

I've transfered the transition to the frame (when the frame gets hovered, the transition kicks in).
Working Fiddle
HTML: (another div added)
<div class="videoframe">
<div>
<img src="http://www.ac4bf-thewatch.com/initiates/upload/20130909/big_522e1c989c94f.jpg">
<div>
</div>
CSS
.videoframe
{
width: 200px;
height: 113px;
border: 2px solid black;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
}
.videoframe div
{
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoframe img
{
width: 100%;
height: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe:hover img
{
width: 300px;
height: 168px;
}

sorry I'm a little bit confused, do you want the parent container to expand with the image?
if so please see http://jsfiddle.net/NcaAA/
you can use
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
with
padding:10px;
to keep consistent padding that takes into account the total width and height you want.

Related

Child div does not fill the parent div when using rounded corners

Per the title, you can see a demo of the issue here.
Here is the HTML code:
<div id="outer">
<div id="inner">
</div>
</div>
Here is the CSS code:
#inner{
height: 100%;
width: 100%;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover{
opacity: 1;
}
#outer{
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
I've tried various suggestions here and here with no solution.
you are using margin-top:20px;
in this element
#inner {
height: 100px;
background-color: #42749F;
width: 200px;
/* -1px here for to compansate for the outer border of the container */
-moz-border-radius: 0 0 9px 9px;
}
remove margin and it will fill inside parent element
Working fiddle
The problem in that is that the child takes priority, if the parent div says:
text-font: Sans-Serif
but the child says:
text-font: Arial
the elements in the child sector take priority. In other words, the parent is the "Default". The same happens to "rounded corners" and "margin-top". The "margin-top" takes priority.
Just make sure that those two are correct.
I guess the border you've set on the inside division is creating problems here. Removing the border makes the child element fully fill the parent.
Is this what you were looking for? You may elaborate more if you want, in comments.
.box {
position: relative;
overflow: hidden;
border-radius: 20px;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
.scratcher{
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
transition: opacity .5s linear;
}
.scratcher:hover{
opacity: 1;
}
<div class="box">
<div class="scratcher">Scratcher</div>
</div>
I noticed that if you offset the difference (6px) in border-width of the containing element (.box_1 / #outer), with the border-radius of the nested element (#scratcher / #inner), you will fill up the corner gaps.
Deduct 6px from the border-radius value of the nested element (#scratcher / #inner).
#inner {
height: 100%;
width: 100%;
border-radius: 13px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover {
opacity: 1;
}
#outer {
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
<div id="outer">
<div id="inner">
</div>
</div>

Text should be shown in two lines

I need to show title in two line.
Like it shown in below image.Second Item is fine but first Item is coming is single line that I dont want
.ms-tileview-tile-titleTextMediumCollapsed {
width: 120px !important;
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: hidden;
}
<div class="ms-tileview-tile-titleTextMediumCollapsed">Group Members</div>
<div class="ms-tileview-tile-titleTextMediumCollapsed">Temp Document Library</div>
You could change the width:
width: 80px !important;
is it that important?
If you don't whant to change the width, you could put a <br/> in the middle of the title.
<div class="ms-tileview-tile-titleTextMediumCollapsed">Group <br/> Members</div>
Here is another way you can achieve it although leo's answer is simple and elegant.
.ms-tileview-tile-titleTextMediumCollapsed {
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: visible;
word-wrap: break-word; // word break with overflow display
max-width: 120px;
}
please check out the link.
https://jsfiddle.net/sarojsasmal/6ce9ym4n/4/
You can easily achieve this by changing the elements width.
But if you don't want to mess with the width, then simple solution is to use padding and box-sizing: border-box properties.
Like this:
.ms-tileview-tile-titleTextMediumCollapsed {
width: 120px !important;
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: hidden;
padding: 0 20px;
box-sizing: border-box;
}
<div class="ms-tileview-tile-titleTextMediumCollapsed">Team Members</div>
<div class="ms-tileview-tile-titleTextMediumCollapsed">Draft Document Library</div>
So you want "Team Members" to be on two lines? But keep everything else?
I would wrap those words in a wrapper that way you don't have to repeat that class on ever menu item. I don't know how much you can customize the html but this might work better for you:
HTML
<div class="title-container">
<span class="two-line-title">Team Members</span>
<span>Draft Document Library</span>
</div>
CSS
.title-container {
width: 120px !important;
top: 80px !important;
text-align:center;
line-height: 1.5em;
overflow: hidden;
transition: top 0.5 ease-out;
}
.title-container span {
display: block;
margin: 0 auto;
}
.two-line-title {
width: 70px !important;
line-height: 1.2em;
}
http://codepen.io/StefanBobrowski/pen/ryRRRv

Image hover effect doesn't work over text

I have an image I want to display as a link. I have a hover effect when the mouse is over the image, but I also want to overlay a text label onto the image. The problem is, when the mouse is over the text, the image effect stops working.
My code is below. Can anyone suggest how I can fix this?
<html>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pic {
border: 5px solid #FF0000;
float: left;
width: 475px;
height: 375px;
margin: 20px;
overflow: hidden;
position: relative;
-webkit-box-shadow: 5px 5px 5px #C0C0C0;
box-shadow: 5px 5px 5px #C0C0C0;
}
.grow img {
width: 475px;
height: 375px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 570px;
height: 450px;
}
.label {
top: 150px;
position:absolute;
text-align:center;
font-size:500%;
color: FF0000;
width: 100%;
}
</style>
<a href="MyLink.html">
<div class="grow pic">
<img src="MyImage.jpg" alt="TITLE">
<div class="label">TITLE</div>
</div>
</a>
You could try disabling pointer-events:
.label { pointer-events:none; }
Your hover is just on your image, apply the hover to the div.
example:
.grow:hover img {
//styles
}

Split content of a div into 2 divisions

I was trying to implement splitting of entire content to create a slideshow. Something similar to this.
http://tympanus.net/Tutorials/FullscreenSlitSlider/
The problem is splitting of divisions equally. I just don't want them to appear to be split but actually split with the first div containing all content but only top 50% height of actual content, and second div containing all content but having only bottom 50% height of original div.
Here's what I have so far.
.container {
position: absolute;
width: 100%;
height: 20%;
}
.slide1, .slide2 {
width: 100px;
height: 50%;
/*height: 100%;*/
overflow: hidden;
position: absolute;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Here's a fiddle link.
UPDATE: This is what I want the end result to look like. This is just a quick hack that appears as though second div is split.
If you just viewed source in the demo site you supplied, you might have seen this bit of code:
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
And if you googled jquery slitslider, the first link you get is FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3
Do you looking for this..
.container {
position: absolute;
width: 100%;
height: 100%;
}
.slide1, .slide2 {
width: 100px;
height: 100px;
overflow: hidden;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Fiddle: http://jsfiddle.net/6Kz7c/3/
EDIT:
Fiddle: http://jsfiddle.net/6Kz7c/5/
This uses a jquery plugin call FULLSCREEN SLIT SLIDER
So You no need to implement it from the sketch.
Here you can find a tutorial how to use that and download the library.
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
Edit:
css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.reveal {
width: 300px;
height: 300px;
margin: 50px;
float: left;
}
.curve {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.curve:hover {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
html
<div class="reveal curve">
<p>lorem</p>
</div>
Fiddle is here
The same principle as that of vertical splitting can be used for horizontal as well. The HTML layout had to be modified a bit to get it working.
HTML
<div class="container">
<div class="slide-wrapper">
<div class="slide1">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
<div class="slide2">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
</div>
</div>
Here's a working fiddle.
http://jsfiddle.net/6Kz7c/8/

Animating an element when hovering on two other element using css

i am trying to animate a div when hovering on another div. Ihave following code
html
<div>
</div>
<div class="content">
</div>
css
div {
height: 100px;
width: 100px;
background: red;
transition: all 0.4s ease-in-out;
}
.content {
height: 20px;
width: 20px;
background: green;
display: none;
}
div:hover + .content{
display: block;
margin-top: -100px;
margin-left: 50px;
}
What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english
jsfiddle-> http://jsfiddle.net/fTAUk/1/
You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:
JS Fiddle
#box {
height: 100px;
width: 100px;
background: red;
position: absolute;
transition: all 0.4s ease-in-out;
}
#content {
width: 20px;
background: green;
height: 0;
transition: all 0.4s ease-in-out;
position: margin-top: -100px;
margin-left: 50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 20px;
}