Here is some HTML code that I have:
<div class="translate-bar">
<div class="icon">
<img src="images/translator-icon.png">
</div>
<div class="contents">
<p>translate contents</p>
</div>
</div>
I would like to create an animation using CSS with this Markup. The animation involves positioning the "translate-bar" using absolute and right:0.
The goal is to initially display only the "icon" image in the browser, and then when a user clicks on or hovers over the icon DIV, the "contents" DIV should be displayed. Both the Icon and Contents DIVs should display inline.
I attempted this using CSS transitions, but unfortunately, I was not successful in achieving the desired effect.
This is how I styled my CSS:
.translate-bar {
position: absolute;
right: 0;
z-index: 9999;
display: table;
}
.icon {
height: 50px;
}
img {
width: 50px;
}
.contents {
display: table-cell;
vertical-align: middle;
background: #ebebeb;
}