I got this problem with safari browser when I used to transform with perspective to parent "parent". these blocks work well with chrome and Mozilla!
any help?
my code and a screenshot from safari below
enter image description here
.service-element {
text-align: center;
padding: 28px;
perspective: 298px;
position: absolute;
padding-left: 56px;
transition: all .5s ease-in-out;
padding-bottom: 60px;
padding-top: 60px;
}
.service-element:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
z-index: -1;
background-color: #ffffff;
border: solid 0.5px #e3e0e0;
border-radius: 24px;
transition: all .5s ease-in-out;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
.service-element img {
height: 89px;
margin-bottom: 31px;
}
.service-element h2 {
font-size: 22px;
font-family: "indielabs-Frutiger-bold";
color: #4c4c4c;
}
.service-element .paragraph {
font-size: 14px;
color: #959595;
font-family: "indielabs-Frutiger-light";
}
<div class="service-element tr">
<img src="http://yehia.alyomhost.net/alyom-new/images/apps-icon#3x.jpg" class="img-fluid">
<h2>تصميم تطبيقات الجوال</h2>
<div class="paragraph">
لوريم ابيسوم نص عشواىي هنا يوضح الشكل وليس الهدف منه المحتوي
</div>
Related
I love the buttons on this site - https://veronicaromney.com/
I tried copying the CSS from the site but I am not making it work right.
I do use Elementor, I added the code to the theme (for the button) and then the ID to the button, but what I got is that the button block (entire block) got the CSS and did nothing on hover.
Can you help me build these buttons?
Here is the code I have so far that pretty much isn't working for me.
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover:before, .mmb-btn:hover:after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
<a id="start-here-btn" class="mmb-btn alignright" href="/contact/"> GET STARTED </a>
You were missing .mmb-btn:hover:before, .mmb-btn:hover:after.
A quickie because why not. I suggest using transform instead of changing the position as it's more dom fluid and semantically cleaner.
Also remember to apply pointer-events: none to the pseudo element so you don't get the spazzy behavior when someone hovers the border outside of the button like you see on the other answers provided.
.fancy-btn {
padding: .5rem 1.5rem;
background-color: #eee;
position: relative;
transition: background-color .5s ease;
}
.fancy-btn:after {
content: '';
display: block;
pointer-events: none;
border: red 1px solid;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translate(1rem,1rem);
transition: transform .25s ease;
}
.fancy-btn:hover {
background-color: yellow;
}
.fancy-btn:hover:after {
top: 0;
left: 0;
border-color: green;
transform: translate(0,0);
}
body {
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
<a class="fancy-btn">HEY I AM A BUTTON, YAY</a>
You have to add only the :hoverpseudo class.
.mmb-btn:hover::before, .mmb-btn:hover::after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover::before, .mmb-btn:hover::after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
GET STARTED
I am trying to create a button with an arrow same as the below image:
But when I do that using the below code it looks like this:
My Code:
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url(../img/image-left.svg);
position: absolute;
left: -15px;
top: 23%;
/*background: #fff;*/
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<a class="ms-btn" href="">LEARN MORE</a>
Hope to see any solution for it using css. so button borders can cut or something..
Add to you code the background-color for the 'svg' and adjust the position top. that was it.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -15px;
top: 15%;
background: #fff;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>
Use clip-path to cut the border. I have added 2 CSS variables to control the cut area:
.ms-btn {
--s: 15px;
--b: 10px;
display: inline-block;
margin: 50px;
color: #3E5B73;
font-size: 12px;
padding: 16px 28px;
position: relative;
transition: 0.3s all linear;
}
/* the border */
.ms-btn:before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #3E5B73;
border-radius: 40px;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--s)),var(--b) calc(50% + var(--s)),var(--b) calc(50% - var(--s)),0 calc(50% - var(--s)));
}
/* the arrow */
.ms-btn:after {
content: "";
position: absolute;
left: -10px;
top: calc(50% - 10px);
background: red;
height: 20px;
width: 20px;
}
<a class="ms-btn" href="">LEARN MORE</a>
The closest style to what you want is that I noted below. I remove left border and reduce top and bottom left border radius. You can increase or decrease them as you want. This arrow doesn't have and doesn't need background color and I think it will solve you problem and meet your need.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border-width: 2px 2px 2px 0px;
border-color: #3E5B73;
border-style: solid;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 20px 40px 40px 20px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -25px;
top: 15%;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>
I have boxes with some content but not all text is displayed. On click I toggle all the text but the problem is I don't want the bottom element to move, instead I want the toggled div to be on top of the bottom element. Would anyone help with ideas how to do this? Thank you.
Ps. Also, for some reason the transition/animation doesn't work.
Here is a link to codepen: https://codepen.io/christmastrex/pen/gOwGvap and here is my code:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
------------------------------------------------------------
.card {
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74,74,74,.3);
&__toggle {
overflow: hidden;
max-height: 55px;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after{
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all .3s ease-in-out;
}
}
&.active {
.card__toggle {
max-height: 700px;
transition: all .3s ease-in-out;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
-----------------------------------------------------
$(document).ready(function() {
$(".js-toggle").on("click", function () {
$(".card__header.active").not($(this)).removeClass("active").next(".js-card-toggle").slideUp("slow");
$(this).toggleClass("active").next(".js-card-toggle").slideToggle("slow");
$(this).closest(".card").toggleClass("active").siblings().removeClass("active");
});
});```
I think you are trying to achieve this, copy it and see if it works.
HTML:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
<p>
Doing resistance training and cardio combined and I have not lost one
single ounce on the scale….I was feeling horribly frustrated being it has
been a month so I decided to do a progress sequence and wth look at me
now!! It’s not about weight, it’s about how your body changes when you eat
right and exercise! Yay!!”
</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
Doing resistance training and cardio combined and I have not lost one single
ounce on the scale….I was feeling horribly frustrated being it has been a
month so I decided to do a progress sequence and wth look at me now!! It’s
not about weight, it’s about how your body changes when you eat right and
exercise! Yay!!”
</div>
</div>
SCSS:
.
card {
max-height: 125px;
overflow: hidden;
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
height: 150px;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
transition: 0.4s ease;
&.active {
max-height: 210px;
}
&__toggle {
background-color: white;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
.card__toggle {
transition: all 0.3s ease-in-out;
width: 100%;
z-index: 1;
background-color: white;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
jQuery:
$(".js-toggle").click(function () {
console.log($(this).parents(".card"));
$(this).parents(".card").toggleClass("active");
});
I managed to do find a solution after all.. I made changes to the css only
background-color: #fff;
max-width: 490px;
padding: 20px;
margin: 0 auto 70px auto;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
&::after {
content: "";
position: absolute;
height: 20px;
background-color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
bottom: -40px;
left: 0;
z-index: 10;
width: 100%;
box-shadow: 0 10px 20px -7px rgba(74, 74, 74, 0.3);
transition: all 0.3s ease-in-out;
transition-delay: 0.5s;
}
&__toggle {
overflow: hidden;
max-height: 45px;
position: absolute;
z-index: 1;
background-color: #fff;
margin-left: -20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 5px;
box-shadow: 0 10px 15px -12px rgba(74, 74, 74, 0.3);
transition: all 1s ease-in-out;
p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.3;
}
&-s {
max-height: 18px;
}
}
&--s {
max-width: 350px;
}
&__img {
border: 5px solid #d54f80;
border-radius: 5px;
padding: 5px 5px 1px 5px;
margin-bottom: 20px;
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
&.card::after {
background-color: transparent;
transition: all 0s ease-in-out;
}
.card__toggle {
max-height: 700px;
}
.card__header {
&::after {
background-color: #fff;
color: pink;
transform: rotate(180deg);
}
}
}
}
I have made a button which has a small tab that upon hovering over it expands to the side. It is there because I want the button to be draggable. So once the tab expands, you can grab it and drag the button around. Don't mind the broken icons, they are supposed to be there from font awesome pack.
However I wanted to inform user, that the small tab can be grabbed, so I made a little jiggle effect on idle that plays two times indicating, that the tab can expand. And once user hovers over it, it fully expands. However when user unhovers the tab, the animation starts again. I need the animation to start only when the page loads and occur exactly 2 times and never again. Why does the aniamtion start after the transition that is there on hover and what can I do to disallow it animating again? Is it possible without JS?
Here is my code
.insite-draggable {
z-index: 10;
position: fixed;
left: 45px;
bottom: 12px;
}
.insite-handle {
position: absolute;
left: -14px;
bottom: 13px;
transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
animation: bounce 2s;
animation-iteration-count: 2;
animation-delay: 2s;
}
.insite-handle:before {
content: "\f100";
font-family: "Font Awesome 5 Free";
font-style: normal;
font-size: 16px;
line-height: 16px;
display: inline-block;
background-color: #1ea2b1;
cursor: move;
color: #ffffff;
height: 16px;
width: 26px;
padding: 3px 3px 3px 4px;
border-radius: 7px 0px 0px 7px;
border: 1px solid #1a8e9b;
transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
}
.insite-handle:hover {
left: -27px;
animation: step-end;
&:before {
content: "\f0b2";
padding-left: 5px;
}
}
#keyframes bounce {
0% { left: -14px; }
10% { left: -20px; }
20% { left: -14px; }
30% { left: -20px; }
40% { left: -14px; }
100% {left: -14px; }
}
.insite-btn {
display: block;
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
font-family: 'BrixSansBold';
font-style: italic;
font-size: 0.875rem;
line-height: 1rem;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #b00402;
border: none;
margin: 10px 10px 10px auto;
padding: 7px 10px 7px 34px;
text-decoration: none;
text-transform: none;
box-shadow: #333333 1px 1px 10px;
background-color: #e3e000;
}
<span class="insite-draggable">
<i class="insite-handle"></i>
<a class="insite-btn" href="#">Turn on</a>
</span>
I used CSS Variables with fallback.
var(--use-this-variable-if-exist, use this fallback if no variable);
Initially there is no --left value, so it uses fallbacks. When hover, set --left value as -27px. Thus, the keyframes are also updated.
.insite-draggable {
z-index: 10;
position: fixed;
left: 45px;
bottom: 12px;
}
.insite-handle {
position: absolute;
left: -14px;
bottom: 13px;
transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
animation: bounce 2s;
animation-iteration-count: 2;
animation-delay: 2s;
}
.insite-handle:before {
content: "\f100";
font-family: "Font Awesome 5 Free";
font-style: normal;
font-size: 16px;
line-height: 16px;
display: inline-block;
background-color: #1ea2b1;
cursor: move;
color: #ffffff;
height: 16px;
width: 26px;
padding: 3px 3px 3px 4px;
border-radius: 7px 0px 0px 7px;
border: 1px solid #1a8e9b;
transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
}
.insite-handle:hover {
left: -27px;
--left: -27px;
&:before {
content: "\f0b2";
padding-left: 5px;
}
}
#keyframes bounce {
0% {
left: var(--left, -14px);
}
10% {
left: var(--left, -20px);
}
20% {
left: var(--left, -14px);
}
30% {
left: var(--left, -20px);
}
40% {
left: var(--left, -14px);
}
100% {
left: var(--left, -14px);
}
}
.insite-btn {
display: block;
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
font-family: 'BrixSansBold';
font-style: italic;
font-size: 0.875rem;
line-height: 1rem;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #b00402;
border: none;
margin: 10px 10px 10px auto;
padding: 7px 10px 7px 34px;
text-decoration: none;
text-transform: none;
box-shadow: #333333 1px 1px 10px;
background-color: #e3e000;
}
<span class="insite-draggable">
<i class="insite-handle"></i>
<a class="insite-btn" href="#">Turn on</a>
</span>
Can anyone help me with wrapping of the text around the + box ? I can't seem to get it to work. I have a jfiddle that you can refer to. Hope anyone out there can assist me.
Here's the JSFiddle.
And here is the code:
.video-box {
float: left;
width: 31%;
max-width: 240px;
height: 214px;
background: #232323;
margin: 0 1% 2%;
}
.video-box h3 {
display: table-cell;
vertical-align: middle;
margin: 0;
font-size: 1.0em;
line-height: 1.2;
}
.addtoplaylist-videotext:before {
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: -8px;
content: "";
left: 80%;
position: absolute;
display: inline-block;
z-index: 99;
border-top: 10px solid rgba(0, 0, 0, 0.6);
}
a {
color: #FFFFFF;
}
.video-txt {
position: absolute;
bottom: 0;
right: 0;
font-size: 1.1em;
line-height: 16px;
background: #000;
padding: 0 3px;
color: #fff;
}
.addtoplaylist-videotext {
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -50px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height: 15px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: none;
}
.viewplaylist-videotext:before {
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: -8px;
content: "";
left: 80%;
position: absolute;
display: inline-block;
z-index: 99;
border-top: 10px solid rgba(0, 0, 0, 0.6);
}
.viewplaylist-videotext {
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -50px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height: 15px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: none;
}
.addtoplaylist-video:hover .addtoplaylist-videotext {
display: block;
}
.viewplaylist-video:hover .viewplaylist-videotext {
display: none;
}
.title {
color: #FFFFFF;
}
.maintainhere-browse {
float: right;
height: 30px;
margin-left: 3px;
margin-top: 20px;
position: relative;
}
.toggle2 {
position: relative;
float: right;
margin-right: 10px;
margin-top: -15px;
background-color: #f36666;
width: 20px;
height: 18px;
color: #FFFFFF;
font-size: 12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
cursor: pointer;
font-weight: bold;
}
.addtoplaylist-video {
position: relative;
bottom: 0px;
right: 0px;
width: auto;
height: auto;
image-rendering: -moz-crisp-edges;
display: inline-block;
cursor: pointer;
}
.viewplaylist-video {
display: none;
}
}
.addtoplaylist-video a {
color: #FFFFFF !important;
}
.viewplaylist-video a {
color: #FFFFFF !important;
}
.play-ico {
background-position: -2px -1351px;
background: url(/blob/1086/1386905708000/a-ico-sprite-png-data.png) no-repeat -2px -1316px;
text-indent: -9999px;
position: absolute;
top: 0;
left: 0;
width: 33px;
height: 33px;
overflow: hidden;
text-align: left;
}
<div class="video-box">
<div class="video-box-content-holder" data-createtime="1385208101000" data-viewcounts="559">
<div class="img" style="max-height:135px">
<a href="/news/video/typhoon-haiyan-politics/897416.html">
<img src="http://i58.tinypic.com/2uj2o3t.jpg" alt="" width="240" height="135" />
<span class="play-ico">play</span>
<span class="video-txt">01:54</span>
</a>
<span class="add-txt">Asia Pacific</span>
</a>
</div>
<div class="txt-box">
<!-- the class toggle 2 is for 2nd component, diff css-->
<div class="maintainhere-browse">
<div id="browsevideos_1" class="toggle2">
<div class="addtoplaylist-video">
<img src="http://i61.tinypic.com/rtdv2b.png" width="12" height="11" alt="add" class="addplaylisticonimg-browse">
<span class="addtoplaylist-videotext"> Add To Playlist!</span>
</div>
<div class="viewplaylist-video">
<img src="http://i59.tinypic.com/2n98as.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg-browse">
<span class="viewplaylist-videotext"> View Playlist!</span>
</div>
</div>
</div>
<!--endofmaintainhere-->
<div class="title">
<h3 style="color:white;">Typhoon Haiyan: Politics gets in the way of saving lives i want the text to wrap around </h3>
<span class="date" style="color:white;">23 Nov 2013</span>
</div>
<!-- title -->
</div>
</div>
</div>
So the basic problem is assigning display: table to .video-box h3.
Once that is removed, it actually does wrap. The problem is now that you won't see it with that text, because it so happens that those words would move to the next line anyway. I've added more words and removed the height of the container and you can see this working:
DEMO showing text is wrapping without table-cell property.
In your case, I'd consider rewriting some of the code around positioning the .maintainhere-browse button:
.maintainhere-browse{
...
/*margin-top:20px; Remove this line */
...
}
.toggle2 {
...
margin-top: 10px; /* Changed this value */
...
}
Demo