I have a problem with a specific style. I have a string "Historic" in a div with CSS transform rotate, positioned on a specific part of sibling div. If I change the string by "Historique" (for i18n), the div move.
I wish the div keep at the same place when string has changed. Thank you for answers.
#main {
margin: 50px;
position: relative;
width: 300px;
background: #eee;
border: thin solid #bbb;
}
#tag {
position: absolute;
left: -36px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: 15px;
text-transform: uppercase;
max-height: 20px;
}
.content {
display: flex;
position: relative;
padding: 20px;
}
<div id="main">
<div id="tag">Historic</div>
<div class="content">a</div>
<div class="content">b</div>
<div class="content">c</div>
</div>
I got it working by changing the tag class to read like this.
Note the transform-origin option.
transform-origin: left top 0;
position: absolute;
left: -21px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: -20px;
text-transform: uppercase;
max-height: 20px;
Related
I have done until now to create a button and inside a tag button I have created another div with class background to give same property for animation effects when click on button.
But I am not sure if in this way is regular syntax for HTML to put another div into tag button in my case?
I AM SHARING MY CODE:
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 500%;
height: 500%;
}
<button class='btn'>
<div class="background"></div>Contact
</button>
But when I Click on button we want background color display as circle and not as eclipse in the center on button. Exactly by the Figmaenter link description here
or code pene: enter link description here
The issue in your approach is that you are setting the background width and height to 1:1 proportions. This would make circle for a square button. For you to create circle you need to make it proportional to the width and height of your button. For example:
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 150%;
height: 406%;
}
<button class='btn'>
<span class="background"></span>Contact
</button>
To get the proportional width you can use in your case (198/73)*height. So if you choose for your height to be 130% you should have width of 353%. The higher % the faster your animation will be, so keep that in mind.
button:hover .background {
width: 120%;
height: 300%;
}
I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
position: relative;
top: -40px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<div class="search-pos">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.
This what happens:
Image / Imgur
As you can witness the button doesn't stay inside the bar itself like it should.
Like Dejan.S I did not get what is the problem.
Be carreful you put a top in a relative class .search-pos, it doesnt work !
I copy your code in CodePen and I think the problem comes from in a other class or maybe in your $search.pos class
https://codepen.io/auxb/pen/WNQjjyp?editors=1100
(I replace the font icon by a img but is the same)
Tell me if this code satisfied you !
For what i understand you need to change your css a little bit.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
height:40px;
position: relative;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
display:flex;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
Let me know, if this solution helps you.
Try putting the code that handles the hover after the specified elements:
.search-box:hover>.search-txt
should come after
.search-txt
also
.search-box:hover>.search-btn
should come after
.search-btn
Hope that helps in ensuring the hover effects work as expected.
Also there is no CSS property such as float: center;
I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}
This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.
I want to get an alert when i click the icon not the whole row but for some reason I am getting it on the whole row. What am I doing wrong?
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
http://jsfiddle.net/hgu02x0b/1/
You have the span element displayed as block so it is covering the container width. you can take this out and text-align all children elements in .footer in the center
$("#scroll-top").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
display: inline-block;
position: relative;
left: 50%;
-moz-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
You gave the <span id="scroll-top"> element display: block, which makes it take full width.
So if you change your click handler to $("i.fa-chevron-up").click(...) it will work
Updated fiddle
Or you can change <span id="scroll-top"> to display: inline-block and set text-align: center on the footer
Updated fiddle
Or, since the icon has a fixed width, give <span id="scroll-top"> the same width, width: 34px and center it using margin: 0 auto
Updated fiddle
You can be more specific on the element you are targeting, at the moment you are targeting the element with the id of #scroll-top but you can be more specific and target the icon element within that #scroll-top i
$("#scroll-top i").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
The span is set to display: block. This makes it take up the full row. You can change the jQuery to be more precise:
$("#scroll-top i").click(function() {
alert('test');
});
fiddle
Changed it to display:inline-block. http://jsfiddle.net/hgu02x0b/2/
.footer #scroll-top {
display: inline-block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
left: 50%;
margin-left: -17px;
}
Hope this helps
I want to add a background zooming out effect same as in this website carousel.. I cannot figure out a solution for that as new to web-designing.
this is the code for the div I want to apply that effect:
MARKUP:
<div class="banner">
<div class="content block1 animated">
<h1>Ceramic Directory</h1>
<span>World's largest Ceramic hub, all the ceramic traders reside here!</span>
Register now
<span class="handler">→</span>
</div>
</div>
CSS:
.banner{
margin-bottom: 10px;
background-image: url("../images/png.jpg");
background-repeat: no-repeat;
height: 700px;
background-size: cover;
width: 100%;
}
.banner .block1{
background-color: rgba(256,256,256,0.7);
margin-top: 10%;
height: 300px;
position: absolute;
width: 90%;
padding-top: 7%;
animation-name: fadein;
-webkit-animation-name: fadein;
}
.banner .block1 h1{
text-align: center;
font-family: LatoWebLight;
font-size: 40px;
margin-bottom: 5px;
}
.banner .block1 span{
text-align: center;
font-family: LatoWebHairline;
font-size: 25px;
margin-bottom: 30px;
display: block;
}
.banner .block1 a{
text-align: center;
border-radius: 5px;
border: 1px solid black;
font-family: LatoWebMedium;
font-size: 18px;
margin-left: 45%;
margin-top: 5%;
padding: 10px;
text-decoration: none;
color: black;
}
.banner .block1 .handler{
text-align: center;
border-radius: 5px;
border: 1px solid black;
cursor: pointer;
font-size: 18px;
margin-left: 105%;
margin-top: -5%;
padding: 10px;
color: black;
width: 20px;
transition: color 0.2s;
-webkit-transition: color 0.2s;
transition: background 0.2s;
-webkit-transition: background 0.2s;
}
.banner .block1 .handler:hover{
font-weight: 900;
background: rgba(34,34,34,0.5);
color: white;
}
how did they make that?
Thanks for the help
The website you mentioned uses a jQuery plugin to animate the header image. You can find the plugin's page here and some detailed documentation here
If you don't plan on using a plugin, you can achieve the image scalling effect by using CSS3. Same example below:
.test {
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}
.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>