I am trying to do a image caption with slide. I have done everything, but the text inside the slide does not wrapped within the slide box. Someone please help in this.
use the JSfiddle link to view the code:
http://jsfiddle.net/anba/t31a4xq0/
HTML
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
<span class="caption simple-caption">
<div class="blogp">
Simple Caption
<p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
</div>
</span>
</div>
</body>
</html>
CSS
#mainwrapper {
/*font: 18pt normal Arial, sans-serif;*/
height: auto;
/*margin: 5px 10px ;*/
/*text-align: center;*/
width: 300px;
overflow: visible;
}
/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
cursor: text;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.7);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 150px;
width: 300px;
display: block;
bottom: -70px;
cursor: text; /*line-height: 100pt;*/
text-align: left;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-40%);
opacity: 1;
transform: translateY(-40%);
}
.blogp{
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #FF8000;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:100%;
}
.blogp a{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14pt;
color: #0080C0;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:400px;
}
Look at the numbers i had used in the html. I have enter 1-50 but it displays only to 23 and the text is not getting wrapped to the next line.
Simply add to your css:
.blogp p{
word-wrap: break-word;
}
UPDATE of your : JSFiddle
Related
When I hover over the corner of the element I am getting a weird constant hover and hover out effect, how can I fix this?
HTML
<h2>
HELLO
</h2>
CSS
h2 {
position: absolute;
background: rgba(2,35,64,0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
display: block;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2,35,64,0);
padding: 20px;
margin: 0px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
h2.woocommerce-loop-category__title:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
http://jsfiddle.net/xc7vjstn/1/
change the background from transparent to what ever color you want and you will see the content plus if you want to keep it online like small box then margin and padding is what you need to play with.
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: blue;
}
The margin in h2:hover is causing the behavior removing the margin fixed the problem
h2:hover {
border: solid 5px #FFF;
padding: 10px;
/*margin: 25px; */
background: transparent;
}
Here is my solution, please check the live example below:
h2 {
position: absolute;
background: rgba(2, 35, 64, 0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2, 35, 64, 0);
padding: 20px;
margin: 0 auto;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
background: transparent;
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<h2>
HELLO
</h2>
I have created a ghost button in CSS and everything is working perfectly well except that the transition of the word after which the user hovers his mouse on the original word is not moving. I want the word "View Details: to move 5px to the left on mouse hover. This might only need one line of code. Thx (-:
.btn_action_1 {
border: 5px solid #000 !important;
/* Change button border color */
color: #000 !important;
/* Change button text color */
font-size: 24px;
line-height: 0;
display: inline-block;
padding: 10px 20px 10px;
position: relative;
text-decoration: none;
text-transform: capitalize;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn_action_1 span {
left: 10px;
position: relative;
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1 .ico_arrow {
background: url(ico_arrow_w.png) 0 center no-repeat;
display: inline-block;
height: 17px;
width: 17px;
position: relative;
left: -10px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1:hover {
background: #000 !important;
/* Change button background color when mouse over */
color: #fff !important;
/* Change button text color when mouse over */
}
.btn_action_1:hover span {
left: -10px;
}
.btn_action_1:hover .ico_arrow {
opacity: 1;
filter: alpha(opacity=100);
left: 0px;
}
#media (max-width: 479px) {
.btn_action_1 {
padding: 18px 30px;
}
}
.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
display: none
}
<a href="#">
<span class="default">Product Name</span>
<span class="hover">View Details</span>
<i class="ico_arrow"></i>
</a>
HTML
<div class="btn_action_1">
<span class="ico_arrow"></span>
<span>some text</span>
</div>
CSS
.btn_action_1 {
border: 5px solid #000 !important;
/* Change button border color */
color: #000 !important;
/* Change button text color */
font-size: 24px;
line-height: 0;
display: inline-block;
padding: 10px 20px 10px;
position: relative;
text-decoration: none;
text-transform: capitalize;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn_action_1 span {
left: 10px;
position: relative;
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1 .ico_arrow {
background: url(ico_arrow_w.png) 0 center no-repeat;
display: inline-block;
height: 17px;
width: 17px;
position: relative;
left: -10px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1:hover {
background: #000 !important;
/* Change button background color when mouse over */
color: #fff !important;
/* Change button text color when mouse over */
}
.btn_action_1:hover span {
left: -10px;
}
.btn_action_1:hover .ico_arrow {
opacity: 1;
filter: alpha(opacity=100);
left: 0px;
}
#media (max-width: 479px) {
.btn_action_1 {
padding: 18px 30px;
}
}
.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover> .default {
display: none
}
guessing the HTML code here
http://codepen.io/anon/pen/grNpPq
this seems to work, on chrome 52.
I really like the search bar on this website, https://www.marmosetmusic.com/
I can do it very basically using CSS steps animation but it doesn't look smooth and I have to change the timing based on the length of the placeholder.
Also, I am not sure how to overlay it as such over an image or parallax design.
What I have tried is:
HTML:
<title>Search</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/type-style.css" media="screen" type="text/css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<h1>
<i class='fa fa-anchor'></i>
Test.com
</h1>
<div class='overlay'></div>
<div class='wrapper'>
<form class='search'>
<input placeholder="search..." required='true' type='text'>
<button class='search-button'>
<i class='fa fa-search'></i>
</button>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400);
body {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/holidayphoto.jpg);
background-position: 0 90%;
overflow: hidden;
}
body, html {
height: 100%;
}
h1 {
color: #fff;
font-size: 3.5em;
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
padding: 20px;
font-weight: 300;
opacity: 1;
}
h1 i {
color: #e74c3c;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: #000;
opacity: 0.92;
top: 0;
left: 0;
}
.wrapper {
width: 560px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -280px;
margin-top: -20px;
-webkit-font-smoothing: antialiased;
z-index: 999999;
}
input[type="text"] {
font-family: 'Alegreya Sans SC', sans-serif;
width: 480px;
height: 40px;
padding: 10px 0 10px 20px;
font-size: 24px;
font-weight: 300;
color: #eee;
background: #222;
border: none;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
input:focus {
color: #fff;
outline: none;
background: #1a1a1a;
}
button[type="submit"], .search-button {
border: 0;
width: 60px;
height: 60px;
background: #222222;
border-left: solid 5px #222222;
text-align: center;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
button[type="submit"] i, .search-button i {
color: #fff;
font-size: 40px;
line-height: 1.4em;
}
.search-button:focus {
outline: none;
}
.search-button:hover {
background: #e53f2e;
border-left: #e53f2e;
}
.switch-wrapper {
font-family: 'Alegreya Sans SC', sans-serif;
width: 70px;
height: 40px;
margin: 10px;
border-radius: 40px;
position: absolute;
background: #444;
right: 118px;
cursor: pointer;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper:before {
position: absolute;
content: 'FLIGHT';
line-height: 2.7em;
left: -54px;
}
.switch-wrapper:after {
position: absolute;
content: '+ HOTEL';
line-height: 2.7em;
right: -60px;
}
.switch-wrapper .switch {
width: 36px;
height: 36px;
margin: 2px 2px;
background: #222;
border-radius: 50%;
position: absolute;
}
.switch-wrapper .switch:hover {
background: #282828;
}
.rent {
position: absolute;
left: 30px;
}
.switch-wrapper.switched:after {
color: #3498db;
text-shadow: 0 0 4px #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.switched:before {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:after {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:before {
color: #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.not-valid {
display: none;
width: 100%;
height: 30px;
background: #e74c3c;
position: absolute;
opacity: 1;
top: 70px;
}
.not-valid span {
font-family: 'Alegreya Sans SC', sans-serif;
color: #fff;
padding: 10px;
line-height: 1.96em;
}
.not-valid span i {
padding-right: 4px;
}
.not-valid span .error-close {
color: #7b190f;
float: right;
padding: 7px 10px 0 0;
cursor: pointer;
}
label.error {
display: none !important;
}
JS
var s = $('.switch');
var sw = $('.switch-wrapper');
$('input').on('click', function(a) {
a.preventDefault();
});
function switchToggle() {
s.stop(false,true).animate({left: "0"}, 200);
}
s.on('click', function() {
if (sw.hasClass('switched')) {
switchToggle();
} else if (sw.hasClass('not-switched')) {
s.stop(false,true).animate({left: "30px"}, 200);
}
sw.toggleClass('switched not-switched');
});
$('.search').validate({
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("div.not-valid span").html("<i class='fa fa-warning'></i> Please type search <i class='fa fa-times error-close'></i>");
// Should use .stop() function.
$(".not-valid").fadeIn();
setTimeout(function() {
$(".not-valid").fadeOut();
}, 2000);
$('.error-close').on('click', function() {
$(".not-valid").fadeOut();
});
} else {
$(".not-valid").fadeOut();
}
}
});
All in one is found in this jsfiddle demo.
Any help would be appreciated!
Here is a simple example of how to style a search field in a similar manner as seen in your example. display: flex does most of the magic here, the rest is getting rid of backgrounds and borders or styling the submit button with an image
For the typing animation you should use a premade plugin like typed.js
.search {
background: rgba(0, 0, 0, 0.1);
display: flex;
}
.search input {
border: 0px;
margin: 0px;
padding: 0px;
}
.search input[type="text"] {
flex: 1;
background: transparent;
font-size: 2em;
}
.search input[type="submit"] {
font-size: 2em;
margin: 4px;
width: 1em;
height: 1em;
cursor: pointer;
background-color: transparent;
background-image: url(https://cdn0.iconfinder.com/data/icons/basic-lines/39/search-512.png);
background-size: cover;
}
.search input:focus {
outline: none;
}
<div class="search">
<input type="text" name="search">
<input type="submit" value="">
</div>
I'm trying to get the transition ease to work on this, but can't. It's a bit trickier to know where to put the transition css when it's targeting something that shows something on hover.
The code is:
<div class="language-box">
<ul>
<li><a href="#" class="call-cs">English
<span class="cs">Coming Soon</span></a></li>
<li>Svenska</li>
</ul>
</div>
And css I'm trying is:
span.cs {
display: none;
}
a.call-cs:hover span.cs {
display: block;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-webkit-transition: background 3s ease;
-moz-transition: background 3s ease;
-o-transition: background 3s ease;
transition: background 3s ease;
}
You can't use transition for display, but change size of your li and it's opacity to create cool transition:
CSS
span.cs {
opacity:0;
height:0;
}
a.call-cs:hover span.cs {
display: block;
height:18px;
position: absolute;
background: #4E4E4E;
color: #FFF;
padding: 2px 10px;
left: 31px;
top: -20px;
opacity:1;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
transition: all 0.5s ease;
}
li{
position:relative;
}
DEMO
HTML Code
<div class="container">
<div class="tip_text">D</div>
<div class="tip_content">test</div>
</div>
<br /><br /><br />
<div class="container">
<div class="tip_text">D2</div>
<div class="tip_content">test test test test test test test</div>
</div>
CSS Code
.container{
position: relative;
float: left;
}
.tip_text{
position: relative;
float:left;
width: 130px;
height: 30px;
margin: 0px;
padding: 2px;
text-align: left;
line-height: 28px;
font-size: 16px;
font-weight: bold;
border: 1px solid #acacac;
cursor:help;
}
.tip_content{
background: #333;
color: #fff;
padding: 10px 15px;
z-index: 98;
min-height: 15px;
position:absolute;
left: 100%;
font-size: 12px;
}
The above code has the following issue which I am trying to solve. The "tip_content" divs do not expand when a lot of text is placed into them. I cannot figure out why. I do not want to have a set width, I would prefer that they grow based on the amount of text put within. This should be happening by default as is the behavior of divs, but in this case it is not. If anyone has insight into this issue it would be greatly appreciated.
http://jsfiddle.net/Qyrjf/
white-space: nowrap;
This seems to fix the problem. Here is the full code in case people are interested in the application of the solution. It is using CSS and CSS3 to create tooltips.
HTML
<div class="container">
<div class="tip_text">D</div>
<div class="tip_content">test</div>
</div>
<br /><br /><br />
<div class="container">
<div class="tip_text">D2</div>
<div class="tip_content">test test test test test test test</div>
</div>
CSS (full)
.container{
position: relative;
float: left;
}
.tip_text{
position: relative;
float:left;
width: 130px;
height: 30px;
margin: 0px;
padding: 2px;
text-align: left;
line-height: 28px;
font-size: 16px;
font-weight: bold;
border: 1px solid #acacac;
cursor:help;
}
.tip_text:hover + .tip_content{
opacity: .9;
visibility: visible;
margin-left: 10px;
}
.tip_content:before{
border: solid;
border-color: transparent #333;
border-width: 6px 6px 6px 0;
content: "";
z-index: 99;
position:absolute;
left:-6px;
top:12px;
}
.tip_content{
background: #333;
color: #fff;
padding: 10px 15px;
z-index: 98;
min-height: 15px;
float: left;
left: 100%;
font-size: 12px;
position: absolute;
white-space: nowrap;
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;
opacity: 0;
margin-left: 20px;
visibility: hidden;
-webkit-transition-property:opacity, visibility, margin-left;
-webkit-transition-duration:0.2s, 0.2s, 0.1s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
-moz-transition-property:opacity, visibility, margin-left;
-moz-transition-duration:0.2s, 0.2s, 0.1s;
-moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
-o-transition-property:opacity, visibility, margin-left;
-o-transition-duration:0.2s, 0.2s, 0.1s;
-o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
transition-property:opacity, visibility, margin-left;
transition-duration:0.2s, 0.2s, 0.1s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
}