# How to set this transition to automatic? it run on hover

**URL:** <https://forum.kirupa.com/t/how-to-set-this-transition-to-automatic-it-run-on-hover/636996>\
**Category:** Uncategorized\
**Created:** [August 6, 2017, 7:15am UTC](https://forum.kirupa.com/t/how-to-set-this-transition-to-automatic-it-run-on-hover/636996 "2017-08-06T07:15:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sukhwinder\_Saini](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Sukhwinder\_Saini](https://forum.kirupa.com/u/Sukhwinder_Saini)\
**Post date:** [August 6, 2017, 7:15am UTC](https://forum.kirupa.com/t/how-to-set-this-transition-to-automatic-it-run-on-hover/636996/1 "2017-08-06T07:15:02Z")

</div>

## css:

```auto
@charset "utf-8";

/* Prevent visible highlighting of text */

::selection {
    background: transparent;
}

body {
    background-color: #008E8E;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    padding: 20px;
}

a {
  color: #fff;
  font-weight: bold;
}

#tile {
    width: 210px;
    height: 118px;
    background-color: #3896F6;
    background-image: url('http://www.webtechgadgetry.com/wp-content/uploads/2013/10/wow.png');
    background-repeat: no-repeat;
    border: 3px solid #008E8E;
    
    transition: background-position 2s;
    -moz-transition: background-position 2s; /* Firefox Support */
    -webkit-transition: background-position 2s; /* Chrome and Safari Support */
    -o-transition: background-position 2s; /* Opera Support */
}

#tile:hover{
    border-color: #219D9D;
    background-position: bottom;
}

#tileCaption {
    position: relative;
    top: 95px;
    left: 12px;
}

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 6, 2017, 3:07pm UTC](https://forum.kirupa.com/t/how-to-set-this-transition-to-automatic-it-run-on-hover/636996/2 "2017-08-06T15:07:50Z")

</div>

Transitions don’t run automatically. If you want it to run on hover, you should use a [CSS animation](https://www.kirupa.com/html5/introduction_css_animations.htm) instead 🙂

---

<div class="post-metadata">

**Author:** ![Sukhwinder\_Saini](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Sukhwinder\_Saini](https://forum.kirupa.com/u/Sukhwinder_Saini)\
**Post date:** [August 6, 2017, 3:38pm UTC](https://forum.kirupa.com/t/how-to-set-this-transition-to-automatic-it-run-on-hover/636996/3 "2017-08-06T15:38:13Z")

</div>

okay thanks buddy  
i sort it out using “wow slider amazing software”