how to make button with image responsive - html

The background is responsive as well, but the button with image and the marquee don't appear on their right position via on mobile,
how to make the the whole index responsive
<div class="main">
<div class="marquee">
<marquee dir="ltr" direction="right" scrollamount="3">
<h3 style="color:#804000;font-size:large;margin-top:0px;" align="center" >
<strong>
<img src="http://www.ghadaalsamman.com/new/images/image21.png" height="37" />
</strong>
</h3>
</marquee>
</div>
</div>
CSS
body {
background: url('images/bg.gif');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
.marquee{
position:absolute;
left:400px;
top:300px;
right:400px;
display:inline;
max-width:100%;
}
#btn1 {
height:60px; width:490px;
background: url("images/enter.gif");
background-repeat: no-repeat;
display: inline-block;
margin-top:610px;
margin-left:380px;
}
.button {
padding: 5px;
}
Fiddle :
http://jsfiddle.net/m0sagal/3fp9j/
Desktop View
http://ghadaalsamman.com/new

DEMO
I have made some changes in html & css so use this code:
HTML:
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
height: 100%;
margin: 0;
}
.marquee {
display: block;
position: absolute;
top: 43%;
width: 100%;
}
#btn1 {
background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
background-repeat: no-repeat;
background-position: center center;
bottom: 10px;
display: block;
height: 53px;
margin: 0 auto;
position: absolute;
width: 100%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
.main {
height: 100%;
padding: 0 20px;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
What i did:
I added a div after main named container & used it to control max with and fitted both marquee and button inside it using absolute position & that's pretty much did all the trick but for the button background image i have used media query.

Related

Change background img on hover with fade effect HTML CSS

I want to set two background images to div and then make them changing while hovering with fade effect like this.
.kid {
max-width:50%;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}
<div class="kid">
<img src="https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg" alt="Kid" itemprop="image" width="600" height="750" />
<img src="https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg" alt="Adult" width="600" height="750" />
</div>
Here it's done by putting image in html code. I have to do this in css as background-image, because I made two column grid gallery (50% width and 100vh) and it doesn't works with <img>.
Here is my code. Help me to get the same effect like in first fiddle.
body{
margin: 0 auto;
width: 100%;
height: 100vh
}
.left{
float: left;
}
.right{
float: right
}
.col-half-width{
width: 50%;
height: 100vh;
}
.project-01{
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-02{
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-01,
.project-02 img{
max-width:100%;
}
<div class="col-half-width left project-01"></div>
<div class="col-half-width right project-02"></div>
Try it using CSS :hover and transition. Note: perhaps you should preload the image so that it works smoothly on the first time aswell.
body{
margin: 0 auto;
width: 100%;
height: 100vh
}
.left{
float: left;
}
.right{
float: right
}
.col-half-width{
width: 50%;
height: 100vh;
}
.project-01{
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
transition: 0.5s;
}
.project-01:hover{
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-01,
.project-02 img{
max-width:100%;
}
<div class="col-half-width left project-01"></div>
The CSS property background-image is not animatable:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
I believe you'll have to do something much more cumbersome. We can use the opacity on a nested positioned object to get the desired effect. Any other content in the parent div will need a z-index value higher than the animated background.
body {
margin: 0 auto;
width: 100%;
height: 100vh
}
.left {
float: left;
}
.right {
float: right
}
.col-half-width {
width: 50%;
height: 100vh;
}
.project-01 {
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
display: inline-block;
position: relative;
}
div.innerAnimate {
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 0;
transition: 0.5s;
}
.project-01:hover div.innerAnimate {
opacity: 1;
}
.project-01,
.project-02 img {
max-width: 100%;
}
div.innerContent {
color: white;
padding: 20pt;
position: relative;
z-index: 100;
}
<div class="col-half-width left project-01">
<div class="innerAnimate"></div>
<div class="innerContent">
<p>My content here.</p>
</div>
</div>

Text centered inside the image

<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</div>

How can I center my text on top of an image, given that it's responsive?

The text is already on top of the image, but the image changes in size when you resize the page. How can you let the text adjust it's center to the height of the image?
This is what I got
HTML
<section id="eyeCatcher">
<div id="catchContainer" >
<div id="eyeCatchQuote">
<h1>text</h1>
</div>
<span id="eyeCatchPhoto" role="img" >
<span class="inner">
</span>
</span>
</div>
</section>
CSS
#eyeCatcher{
max-width: 1366px;
margin: 0 auto;
}
#catchContainer {
max-width: 1366px;
}
#catchContainer #eyeCatchPhoto {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
#catchContainer #eyeCatchPhoto .inner{
padding-top: 60%;
display: block;
height: 0;
}
#catchContainer #eyeCatchPhoto{
background-image: url("../img/overview.jpeg");
}
#eyeCatchQuote{
margin-top: -26px;
position: relative;
top: 300px;
}
And this is what it looks like
Big
Resize to small
Instead of using a span with a background image you can use an actual image.Then it is possible to center the text using absolute positioning.
HTML:
<section id="eyeCatcher">
<div id="catchContainer">
<div id="eyeCatchQuote">
<h1>TEXT ELEMENT</h1>
</div>
<img src="YOURIMage" id="eyeCatchPhoto" role="img">
</div>
</section>
CSS:
#eyeCatcher {
max-width: 1366px;
margin: 0 auto;
}
#catchContainer {
max-width: 1366px;
position: relative;
}
#catchContainer #eyeCatchPhoto {
width:100%;
}
#eyeCatchQuote {
position: absolute;
top: 50%;
left:50%;
margin:0;
transform:translateX(-50%)translateY(-50%);
}
Here is a fiddle

how to make the homepage responsive

I'm a Newbie with CSS, I want to make a responsive design for mobile IE. Now "it appear as a blank page",But it's working well in Google chrome and other rest of browsers :-)
Below is my codes that's I used
HTML:
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
height: 100%;
margin: 0;
}
.marquee {
display: block;
position: absolute;
top: 43%;
width: 100%;
}
#btn1 {
background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
background-repeat: no-repeat;
background-position: center center;
bottom: 10px;
display: block;
height: 53px;
margin: 0 auto;
position: absolute;
width: 100%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
.main {
height: 100%;
padding: 0 20px;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
jsfiddle
Desktop View
Thanks in advance
Work great for me on Windows Phone 8.1
I don't think there is an issue with responsiveness, I checked on desktop resizing my browser on IE and also on Windows Phone.

how to make the design fully responsive

The page open with scroll. I want to make the page appear fully responsive without any scroll bar. I tried to set the height to 100% with no luck.
html {
height: 100%;
width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
display: block;
position: relative;
width: 51vw;
margin: auto;
}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
display: block;
height: 53px;
margin: 0 auto;
position: relative;
width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
This is the problem
body {
width: 100%;
hight: 100%; <----- 'hight' make it 'height'
margin: 0;
padding: 0;
}
Replace with this
body {
width:100%;
height:100%;
margin: 0;
padding:0;
}
the ratio of your image will make it difficult i believe.
Since you started using vw units, maybe it's an hint to use vh units and max-width too.
Because of your image, too much like a square, the container needs too be a bit smaller to stay in sight. Because of , vw units, i would propose to use display:fle to easily center you container :
DEMO of my idea
CSS updated :
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;/* UPDATED*/
margin: 0;
padding:0;
display:flex;/* UPDATED*/
}
.main {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 15vh;/* UPDATED*/
background-size: 100%;
width:100vh;/* UPDATED*/
margin:auto;/* UPDATED*/
max-width:100vw;/* UPDATED*/
overflow:hidden;/* UPDATED hide marquee*/
}
.container {
display: block;
height: 100%;/* useless when parent has no height given */
margin: 0 auto;
position: relative;
}