How to keep rotated banner text vertically centred, despite length of string? - javascript

As part of a project, I need to have a banner/strip of text over the corner of our images, only showing as much of the container as there is text (give or take a bit of padding). But the length of the string varies, which means the means I can't simply use top/left as you usually would.
This picture shows the desired end goal:
Here is the core HTML/CSS but I can't figure out how to make this responsive in the way it needs to be? Is there a CSS solution or is probably JS with math?
<div class="image">
<img src="image.jpg">
<div class="banner">
<span class="banner-text">Banner Text</span>
</div>
</div>
<style>
.image {
position:relative;
}
.banner {
position: absolute;
width: 100%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
</style>

you can try to move down the text before rotation taking into account its length using the way vertical padding is calculated when percentage is used.
here is a few example : (see comment in css)
figure {position:relative;
overflow:hidden;}
figcaption {
position:absolute;
top:0;
padding:0.5em 3em 0.5em 2em;/* tune padding here*/
background:linear-gradient(to top, green 2.25em, transparent 2.25em);/* draw only one line average background*/
transform:rotate(-45deg);
transform-origin:bottom left;
box-sizing:border-box;/* include padding and border*/
min-width:150px;/* tune this to have a minimal width and way down*/
}
/* push me down */
figcaption:before {
content:'';
display:inline-block;
padding-top:90%/* 90% of my parent's width which i figcaption*/
}
<figure>
<img src="http://dummyimage.com/300x128">
<figcaption>caption </figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/300x128">
<figcaption>caption text</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/300x128">
<figcaption>longer caption text</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/300x128">
<figcaption>bit longer caption text</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/300x300">
<figcaption>tiny bit longer caption text</figcaption>
</figure>
here is an animated demo to show the padding effect in action , for ribbons on the left and on the right side
figure {
position: relative;
overflow: hidden;
display: inline-block;
margin:0;
}
.left figcaption {
position: absolute;
top: 0;
padding: 0.5em 3em 0.5em 2em;
/* tune padding here*/
background: linear-gradient( to top, green 2.2em, transparent 2.25em);
/* draw only one line average background*/
transform: rotate(-45deg);
transform-origin: bottom left;
box-sizing: border-box;
/* include padding and border*/
min-width: 150px;
/* tune this to have a minimal width and way down*/
/* animation for demo */
animation: txtin 2s steps(4) alternate infinite;
word-spacing: 2em;
color: white
}
/* push me down */
.left figcaption:before {
content: "";
display: inline-block;
padding-top: 94%;
/* 90% of my parent's width which i figcaption*/
}
.right figcaption {
position: absolute;
top: -3.5em;
right: -6em;
padding: 0.5em 4em;
/* tune padding here*/
background: green;
/* draw only one line average background*/
transform: rotate(45deg);
transform-origin: bottom left;
box-sizing: border-box;
/* include padding and border*/
min-width: 12.5em;
/* tune this to have a minimal width and way down*/
overflow: hidden;
/* demo */
animation: txtin 2s steps(4) alternate infinite;
word-spacing: 2em;
color: white
}
#keyframes txtin {
to {
text-indent: -21em;
color: yellow
}
}
<figure class="right">
<img src="http://dummyimage.com/300x300/0af/&text=right_ribbon_of_any_length">
<figcaption>ribbon animated demo</figcaption>
</figure>
<figure class="left">
<img src="http://dummyimage.com/300x300/0df/&text=left_ribbon_of_any_length">
<figcaption>ribbon animated demo</figcaption>
</figure>

After a little bit of digging I found the following solution.
.parent {
overflow: hidden;
/* required */
width: 50%;
/* for demo only */
height: 250px/* some non-zero number */
;
margin: 25px auto;
/* for demo only */
border: 1px solid grey;
/* for demo only */
position: relative;
/* required for demo*/
}
.ribbon {
margin: 0;
padding: 0;
background: rebeccapurple;
color: white;
padding: 1em 0;
position: absolute;
top: 0;
right: 0;
transform: translateX(30%) translateY(0%) rotate(45deg);
transform-origin: top left;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
top: 0;
margin: 0 -1px;
/* tweak */
width: 100%;
height: 100%;
background: rebeccapurple;
}
.ribbon:before {
right: 100%;
}
.ribbon:after {
left: 100%;
}
<div class="parent">
<h4 class="ribbon"> Hello Special</h4>
</div>
<div class="parent">
<h4 class="ribbon">Very Special Sale Today</h4>
</div>

Related

How to make an element on top of a div in the same background color?

I'm trying to create a button for my website that has the same color as the background, even when its size changes.
Basically, the button is on top of a div with white background, that is on top of the body which has gradient background-color.
When I press on the button, its size (scale) changes, and I want it to seem like a cutout/window in the div, that will display the background color.
What I tried to do is to make it gradient, but when it resizes - the gradient background of the button resizes as well. Also that solution is inelegant...
My cite's code:
function chg()
{
document.getElementById("main_div").style.width = "80%";
document.getElementById("catch_div").style.right = "7%";
document.getElementById("enter_div").style.left ="4%";
}
html,body, #main_div{
height: 100%;
overflow: hidden
}
body {
background-color: #1862A1;
background-image: linear-gradient(90deg, #1862A1, #8529B1);
padding-bottom: 0;
padding-top: 0;
margin: 0;
}
#main_div{
height: 100%;
width: 100%;
transition:all 0.3s ease-in-out;
background-color: white;
}
.logo{
width: 48.125vw;
height: 22.3046875vw;
}
#catch_div{
right: 40%;
position: relative;
transition:all 0.3s ease-in-out;
margin-top: -3vw;
}
#enter{
display: block;
width: 6vw;
height: 6vw;
box-shadow: 0 0 0 1px #fff;
text-align: center;
line-height: 136px;
border-radius: 100%;
text-decoration: none;
transition: all 250ms;
outline: 0;
background-color: transparent;
border: 1px solid red;
}
#enter:active{
transform: scale(.90);
}
#enter:active #VButton {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
#enter_div{
left: 40%;
position: relative;
transition:all 0.3s ease-in-out;
margin-top: 3vw;
}
.catchphrase{
font-family: Niconne;
font-size: 3.5vw;
font-weight: 400;
color: #1761A0;
}
#cspan{
background: -webkit-linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
background: -moz-linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
background: linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(90deg, #1862A1, #8529B1) center fixed;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
#VButton{
width: 5.33vw;
height: 5.33vw;
margin-left: 0vw;
margin-top:0.31vw;
position:relative;
}
<body onload="chg()">
<form id="form1" runat="server">
<center>
<div style="min-height: 100vh;" id="main_div">
<asp:Image runat="server" ImageUrl='~/BETTER_logo.png' ID="logo" CssClass="logo"></asp:Image>
<div id="catch_div"><asp:Label ID="Label1" runat="server" Text="Label" CssClass="catchphrase">Feel <span id="cspan">the rythem</span></asp:Label></div>
<div id="enter_div">
<button type="button" id="enter">
<center><img src="VButton.png" id="VButton"></center> <!-- problem -->
</button>
</div>
</div>
</center>
</form>
</body>
Is something like that even possible? Anyone has a direction that he can point me into?
Tried looking online for something close, but with no luck, I would appreciate any help
EDIT: I would love for the cut out to be able to move, so that I'll be able to create animations in my site in the future with my JS code.
You could create a 'hole' in the white div and place the button (with a transparent background) over it and scale them when clicked. That way the background image of the body will always show through and you don't have to worry about the button's background.
The way to create a hole is to give the white div a radial gradient, positioned where you want the button and with the first part transparent, and then white to the edge.
Here is a small example, the parameters for width etc are in CSS variables to make it easy to play around. Obviously put your own backgrounds for the body in and your own dimensions.
UPDATE the question was expanded to ask how to move the hole. The method here is to move the whitediv - we make it twice the dimensions of those that are actually seen on the screen so that as it moves the viewable part remains white.
Note any other elements that are on top of the white need to be taken out of whitediv and displayed over it so they don't move as the hole moves.
The demo simply expands/contracts the hole if the hole is clicked on and 'moves' the hole if the white part is clicked on [this last bit just for a demo]. Click the white part to see the hole 'fly in'.
const button = document.querySelector('.enter');
const whitediv = document.querySelector('.whitediv');
let n = 0; //just for a test to move the hole (whitediv) around
button.addEventListener('click', function (ev) {
ev.stopPropagation();
whitediv.style.transform = whitediv.style.transform.includes('scale(1)') ? whitediv.style.transform.replace('scale(1)', 'scale(var(--s))') : whitediv.style.transform.replace('scale(var(--s))', 'scale(1)');
});
//just for a demo we move the hole around a little bit if the whitediv is clicked
whitediv.addEventListener('click', function (ev) {
n = (n+1)%3;
whitediv.style.transform = 'translateX(-' + (10*n) +'%) translateY(-' + (10*n) +'%) scale(1)';
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
width: 100vw;
height: 100vh;
}
.container {
--x: 30%; /* distance from the left of the white div to center of the hole */
--y: 40%; /* distance from the top to the center of the hole */
--d: 10vmin; /* the diameter of the hole to start with */
--s: 2; /* the scaling factor - factor by which the hole will expand on clicking */
--w: 40vw; /* width of the white div */
--h: 40vh; /* height of the white div */
--top: 10%; /* position of the white div */
--left: 20%;
position: relative;
top: var(--top);
left: var(--left);
width: var(--w);
height: var(--h);
overflow: hidden;
border: 4px white;
}
.whitediv {
position: relative;
width: 100%;
width: 200%;
height: 100%;
height: 200%;
background-image: radial-gradient(circle at var(--x) var(--y), transparent 0%, transparent calc(var(--d) / 2), white calc(var(--d) /2), white 100%);
transition: all 2s;
transform: scale(1) translateX(-50%) translateY(-50%);
transform-origin: var(--x) var(--y);
overflow: hidden;
}
.enter {
background-color: transparent;
height: var(--d);
width: var(--d);
position: relative;
top: var(--y);
left: var(--x);
transform: translateX(-50%) translateY(-50%) scale(1);
border-radius: 50%;
border-style: none;
}
<div class="container">
<div class="whitediv">
<div class="enter">
</div>
</div>
</div>
Here are two ways to do what you wanted to do:
You could create a div with a button. You give the div a background colour. In this case it is blue. Then you give the button the background colour transparent to make the button transparent and the background colour is taken from the div. It is a bit difficult to explain. Therefore here is an example:
div {
background: blue;
width: 300px;
height: 300px;
}
button {
background: transparent;
color: white; /* The button has a white colour to make it easier to see. /*
}
<h2>The background colour of the button was taken from the div</h1>
<div>
<button>Hello World!</button>
</div>
Then there is a second possibility. You can address the div and the button at once. To do this, you have to separate the properties with a ,.
Here is an example:
div {
height: 50px;
width: 100px;
}
/* giving both a background color */
div, button {
background: red;
}
<div>
<button>Hello World</button>
</div>
<h2>Even if the button is not in the div, it has the same background colour.</h2>
<button>Second Button</button>
<br>
<br>
<button>Third Button</button>

Reveal a div with dynamic height underneath another div inside a container?

So, I have a box of content that has a title and a description, which are positioned at the bottom of the div. Initially, the description is hidden. What I'm trying to do is when you hover over the div, the title should move up and reveal the description, which has a dynamic height.
Here's what I have now: https://codepen.io/tayanderson/pen/qJrmXE
The problem is that it wouldn't display correctly if the description was 1 line or 3 lines. The title div should move up depending on the size of the description div.
Here's an example of what I'm trying to do
HTML
<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur</div>
</div>
CSS
.grid-item {
height:300px;
background-size: cover;
width:300px;
position: relative;
overflow: hidden;
color: #fff;
.title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 20px;
}
.desc {
position: absolute;
bottom: 0;
transform: translateY(100%);
padding: 5px 20px;
}
&:hover .title {
bottom: 30%;
}
&:hover .desc {
transform: translateY(0%);
}
}
It this what you meant?
.inner, .inner:hover .grid-item.inner {
-webkit-transition:all linear 0.2s;
transition:all linear 0.2s;
}
.inner {
background: #afa;
width: 300px;
overflow: hidden;
position: absolute;
}
.grid-item:hover .inner{
margin-top: -100px;
}
<a class="grid-item" href="{{ .Permalink }}" style="background-image: url(images/recipes/{{.Params.image}})">
<div class="inner"><h3 class="title is-3">{{.Title}}</h3></div>
<div class="content"><p class="grid-item-blurb">{{.Description}}</p></div>
</a>
Note that I reversed the order of the inner elements.
.body {
background: #aaf;
height: 100px;
width: 300px;
overflow: hidden;
}
.inner, .content {
transition: all linear 0.2s;
}
.content {
height: 100%;
}
.inner {
background: #afa;
transform: translateY(100%);
top: 100%;
}
.body:hover .inner,
.body:hover .content {
transform: translateY(-100%);
}
<div class="body">
<div class="content">
Blue is a viewport (<body>, visible part of a page), which content should be compressed upon green slide-in
</div>
<div class="inner">Green is variable-height text which slides in on viewport hover</div>
</div>

text rotation : vertical without any absolute , inside the div

I am trying to achieve roational text within the div but now able to do it.
Problem facing
rotational text should be upside down , like the text should start from bottom, tried to achieve with -90 but it is going upward and crossing the div.
no matter what the text, it should be inside the div (currently because it is absolute it is crossing the parent div and is not responsive).
Height of the text should always be 100% of parent height.
trying hard to achive this but not getting the clean solution.
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
margin-left: 30px;
padding: 8px;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>
You can use writing-mode: vertical-rl or writing-mode: vertical-lr. This CSS property is also supported by all latest browser.
You can use a pseudo-element to add some padding.
header,footer {
background-color: lightgrey;
}
.vertical-text {
display: inline-block;
transform: rotate(-90deg);
}
.vertical-text:after {
content: '';
padding: 45% 0;
display: block;
position: relative;
top: 0;
}
<header>
header
</header>
<div class="vertical-text">
some vertical text
</div>
<footer>
footer
</footer>
Here is a better approach (taken from http://kizu.ru/en/fun/rotated-text/) which uses a wrapping span:
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
line-height: 1.5;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
transform: translate(0,100%) rotate(-90deg);
transform-origin: 0 0;
}
.rotated-text__inner:after {
content: "";
float: left;
margin-top: 100%;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<span class="rotated-text">
<span class="rotated-text__inner">
622 and 626 All Material Transporter (PC2269)
</span>
</span>
</div>
</div>
<div class="footer">
footer
</div>
This is what i understand from your question. If it aint what youre looking for. Please comment so i can edit on it.
EDIT
Added jquery to calc the min height of the sidebar
vertTop = $('.vertical-text').width();
vertTop = vertTop + 60;
$(".sidebarmain").css('height', $('.vertical-text').width());
$('.vertical-text').css('top', vertTop);
.header {
width: 100%;
height: 30px;
background: gainsboro;
}
.footer {
width: 100%;
height: 30px;
background: gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
padding: 10px 0;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>

Text fill effect - simulate a block of color passing through text

I'm trying to create a text effect so when you hover over text, a block of color seems to pass through the text.
I followed exactly what the first example here (for the word "Kukuri") does by using a :before pseudo-element to achieve the color fill. I have the code written here in SCSS:
.text {
position: relative;
&:hover {
&:before {
width: 100%;
}
}
&:before {
content: 'HELLO'; // if our text was "HELLO"
width: 0%;
position: absolute;
z-index: 2;
overflow: hidden;
color: red;
transition: width 350ms ease-in-out;
white-space: nowrap;
width: 0%;
}
}
However, I'm wondering if it's possible to animate the :before element's width the other way? So once it hits 100% width and fills with color, then the left side starts emptying and it goes back to 0% fill.
The end goal is to use this for a navigation menu. Something like this effect where it seems like a block of color is moving through menu items when you hover:
For something like this, hovering over "About" item would make the fill color wipe down while
Attempted Solutions
I tried translating the :before element, changing the left and right properties, and changing transform-origin to no avail.
I've tried looking into mix-blend-mode to try and create a rectangular mask that could potentially add color to the text. However, to my understanding, mix-blend-mode only works with text and not with rectangular divs with background-colors.
You may do something like this by simply using a layer that pass above your element with transparent background:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
margin: 10px;
position: relative;
font-size: 30px;
color: red;
font-weight: bold;
overflow: hidden;
}
ul li:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.6);
transition: 2s;
z-index: 2;
}
ul.ver li:before {
top: 0;
left: -100%;
}
ul.hor li:before {
top: -100%;
left: 0;
}
ul.ver li:hover::before {
left: 100%;
}
ul.ver.half li:hover::before {
left: 0;
}
ul.hor li:hover::before {
top: 100%;
}
ul.hor.half li:hover::before {
top: 0;
}
<ul class="hor">
<li>Home</li>
<li>About</li>
</ul>
<ul class="hor">
<li>Home</li>
<li>About</li>
</ul>
<ul class="ver half">
<li>Home</li>
<li>About</li>
</ul>
<ul class="hor half">
<li>Home</li>
<li>About</li>
</ul>
And here is another example using mix-blend-mode with text:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
margin: 10px;
position: relative;
font-size: 30px;
background-image: linear-gradient(to right, red, red);
background-size: 200% 200%;
background-repeat: no-repeat;
font-weight: bold;
overflow: hidden;
transition: 1s;
}
ul.hor li {
background-position: 0% 200%;
}
ul.ver li {
background-position: 200% 0%;
}
ul li span {
display: inline-block;
color: black;
background-color: white;
mix-blend-mode: screen;
}
ul.hor li:hover {
background-position: 0% -100%;
}
ul.ver li:hover {
background-position:-100% 0%;
}
ul.hor.half li:hover {
background-position: 0% 0%;
}
ul.ver.half li:hover {
background-position:0% 0%;
}
<ul class="hor">
<li><span>Home</span></li>
<li><span>About</span></li>
</ul>
<ul class="ver">
<li><span>Home</span></li>
<li><span>About</span></li>
</ul>
<ul class="hor half">
<li><span>Home</span></li>
<li><span>About</span></li>
</ul>
<ul class="ver half">
<li><span>Home</span></li>
<li><span>About</span></li>
</ul>
You can use blend modes for this effect, here you have one posibility:
I opted for moving the background of the pseudo rather than moving the pseudo itself, This way you won't have side effects when the pseudo is over other elements.
Also, it isn't clear for me if you want a single slide or a double one. I have set it to be a double one ( from black to red and again to black. You can change this easily adjusting the final background position
.demo {
background-color: yellow;
margin: 10px;
display: inline-block;
font-size: 50px;
padding: 10px;
position: relative;
}
.demo:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75% );
mix-blend-mode: lighten;
background-size: 400% 100%;
transition: background-position 2s linear;
background-position: 100% 0%;
}
.demo:hover:after {
background-position: 0% 0%;
}
<div class="demo">TEST1</div>
<div class="demo">TEST2</div>
To change the movement to vertical, you need to change
the gradient direction
which of the image dimensions is oversized
the background position that is changed on hover
.demo {
background-color: yellow;
margin: 10px;
display: inline-block;
font-size: 50px;
padding: 10px;
position: relative;
}
.demo:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: linear-gradient(to top, transparent 25%, red 25%, red 75%, transparent 75% );
mix-blend-mode: lighten;
background-size: 100% 400%; /* changed vertical dimension */
transition: background-position 2s linear;
background-position: 0% 100%; /* changed 100 position to vertical*/
}
.demo:hover:after {
background-position: 0% 0%;
}
<div class="demo">TEST1</div>
<div class="demo">TEST2</div>
.text {
text-transform: uppercase;
font-weight: 900;
overflow: hidden;
line-height: 0.75;
color: #c5c2b8;
position:relative;
}
.text:before {
content: attr(data-letters);
position: absolute;
z-index: 2;
overflow: hidden;
color: red;
white-space: nowrap;
width: 0%;
top:0;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
}
.text:hover:before {
width: 100%;
}
<span class="text" href="#" data-letters="hello">hello</span>

How to show text in image hover

I have a few tumbnails that I want to show some text on them in hover. I could make them dark in hover but do not know how to add text.
example: http://www.lenzflare.com/video-production-portfolio/
Here is what I have done:
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -150px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>
Demo: http://jsfiddle.net/jmXdh/79/
Well I'm going to assume you want this in a list:
There are a few main concepts here: Relative positioning and how it works with absolute positioning, Source order, and your centering technique.
When giving position:relative; to the box, you are saying "I am the boundary now - for any absolutely positioned things within me" (unless they are relative, and then like that on down the line) - So, the absolutely positioned cover thing you want to fade in - is absolutely positioned to one or more edges of the relative box. (most people use top: 0; left: 0;) --- so the absolute box is no longer in the "flow" and lives in it's own magic world determined by the relative parent.
Source order: your html will appear bottom up when stacking. so your cover thing should be below the image (in the html order) - you could use z-index - but there is no need to do that.
The negative margins are not really awesome and unneeded here. You can just text align center them. I would do some tests and put borders around stuff so you can see what it actually happening. ALSO - I encourage you to use box-sizing: border-box; on everything...
Read about: Border box
HTML
<ul class="thumbnail-list">
<li>
<a href="#" class="image-w">
<img alt="thumbnail"
src="http://placekitten.com/600/300" />
<div class="cover">
<h3>Title</h3>
<p>A little bit more about the thing</p>
</div>
</a>
</li>
</ul> <!-- .thumbnail-list -->
CSS
.thumbnail-list {
list-style: none;
margin: 0; paddingn: 0;
}
.thumbnail-list li {
float: left;
}
a {
text-decoration: none;
color: inherit;
}
.thumbnail-list .image-w {
display: block;
position: relative;
width: 16em;
}
.image-w img {
display: block;
width: 100%;
height: auto;
}
.cover {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
color: rgba(255,255,255,0);
text-align: center;
transition: all 1s linear;
}
.cover:hover {
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
transition: all .2s linear;
}
.thumbnail-list h3 {
font-size: 1.2em;
}
.thumbnail-list p {
font-size: .9em;
}
Here is the code in action on jsfiddle
you could consider something like this fiddle.
I copy my code here:
=================
HTML
<a href="/" class="img"
style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');"
onmouseover="this.firstElementChild.style.display='block'" >
<span class='play' onmouseout="this.style.display = 'none'";>
my lovely text here
<span>
</a>
=================
CSS
a {
min-height:104px;
min-width:184px;
display: inline-block;
overflow: hidden;
position: relative;
}
.play{
display:none;
color:#fff;
height:104px;
width:184px;
background-color:rgba(0,0,0,0.5);
position: absolute;
}
It sounds like you want to have a tooltip, if so then add a title to the a href:
<a href="/" title="This is my text" >
You could also use the tooltip in jQuery UI.
Otherwise, you could use the javascript onmouseover or the jQuery hover / mouseenter events to show the text in the play div. You may need to make sure that the z-index of the play div is higher than the img.
This works:
.pic{
background: url(http://i42.tinypic.com/2v9zuc1.jpg);
width: 200px;
height: 100px;
}
.text{
background: black;
text-align: center;
color: white;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.text:hover{
opacity: 0.8;
}
<div class="pic">
<div class="text">My Text</div>
</div>
DEMO
Add some text content to the play element.
<div class="play">Some text</div>
With added css for .play:
color:#fff;
font-size:16px;
Try this: http://jsfiddle.net/JU7zm/
<a href="/">
<div class="play">text</div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a .play {
display: none;
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 184px;
height: 104px;
color: #fff;
}
a:hover .play { display: block; }
Here's a simple JS solution you can insert into your HTML:
<script type="text/javascript">
document.getElementById("your_image_id").title = 'your hover text';
</script>

Categories