February 27, 2013

CSS3 – Transition

Question by Wanny Miarelli

I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.

This is my Index.html file

    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">

<div class="box"></div>
<div class="ssin"></div>


nothing special ! and this is the main.css

    height: 200px;
    width: 200px;
    background-color: #333333;

    height: 200px;
    width: 200px;
    background-color: red;

.box:hover .ssin{
    width: 500

i think the problem is around here …

.box:hover .ssin{
    width: 500;

if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin

Can you help me ( i know its stupid, but am learning )

Sorry for my bad eng.

Thank you

Answer by Jeremy T

In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin

Answer by Starx

Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box

<div class="box">
    <div class="ssin"></div>

And add the transition css to your code

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!