I have an image link map in the header of my wordpress theme that I need to make responsive under 750px. I have been able to make the links show up in the header but they aren't active and I'm not sure why. Right now I'm just trying to get the "p1" link to work.
site is here: indie-scene.com
Here is my php:
<div class="header header-default">
<img src="<?php echo $ti_option['site_logo']['url']; ?>" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="<?php echo $ti_option['site_logo']['width']; ?>" height="<?php echo $ti_option['site_logo']['height']; ?>" />
<div class="hotspots">
<div title="home">
</div>
<div title="sell">
</div>
</div>
</a><!-- Logo -->
and my media query in css
#media only screen and (max-width: 750px) {
.header {
width:100%;
}
.header img {
content: url(http://indie-scene.com/wp-content/uploads/2014/10/logo_no_banner.png);
max-width: 276px;
}
.header {width:100%; position:relative; }
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.header a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; }
.header a.p1 {left:50%; top:5%; width:50%; height:50%;}
The links aren't appearing because you've set the visibility of your hotspots div to be hidden for widths under 750pxhere:
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; }
You will either need to remove visibility:hidden; from the CSS above or change it to visibility: visible;.
In the above image, I set the visibility of the hotspots div to visible using the developer tools and you can see that your .p1 link is appearing now.
Related
new here at every aspect xd Sry for my bad english.
Im trying to make a typical "background" video at my page but i can't to make the video fit the content of the grid cell whatever I do.
The idea is that the video stay at z-index -1 and fit 1920x1080px but for some reason it got resized and stay at the center o do crazy things.
The first I do its a grid template with divs, and I make the first of them 1920x1080px, 2 columns.
Then this happens when I put in the video on that cell (video is 1920x1080px):
enter image description here
I tried putting video with pos: absolute, I tried with the container too, assigning height, widths, justify-content, top:0, display: block ... i have no clues now, ive tried almost everything that I knew and googled but I couldnt do do the shit.
Heres my html:
<?php get_header(); ?>
<div class="main-container">
<div class="item1">1
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
<?php get_footer(); ?>
And my css
/*GRID index*/
.main-container {
display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;
}
.main-container div {
color:black;
border: 1px solid black;
}
.main-container video {
display:block;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
Can u help me? What I am doing wrong?
enter image description here
Heres the inspector with this css:
/*GRID index*/
.main-container {
display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;
}
.main-container div {
color:black;
border: 1px solid black;
}
.main-container video {
position:absolute;
align-self:stretch;
justify-self:stretch;
display:block;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
min-height:400px;
min-width:400px;
}
Use object-fit and object-position to scale and position the video.
Even if the element is 1920x1080 the video contents may not depending on the videos aspect ratio and by default get scaled to be contained in the element.
/*GRID index*/
.main-container {
display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;
}
.main-container div {
color:black;
border: 1px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
<div class="main-container">
<div class="item1">
<video id="vid" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
I should round the image in pdf. I generate a pdf with PHP that shows also an image inside. Everything works correctly. When I add "width" and "hight" to the image it works, but when I try to round the corners of the image it does not work. When I envelop image with div and add to div border-radius and overflow: hidden; -> overflow: hidden; does not work.
Here is part of my code:
<style>
.visuel-carte{
text-align: center;
margin-top: 25px;
margin-bottom: 40px;
position: relative;
border-radius: 20px;
background-color: green;
}
.visuel-carte img {
height: 270px;
width: 420px;
border-radius: 20px
}
</style>
<page>
<div class="visuel-carte">
<img src="<?php echo $eboutique['visuel_carte']; ?>"/>
</div>
</page>
maybe you have some idea?
I tried also
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
but it shows me an error
I found an error in my code:
does not work:
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
work (without a little quotes ;) ):
<div style="background-image: url(<?php echo $eboutique['visuel_carte'];?>)">
I'm building site a with store images, although some stores don't have an available image. The best I can do is use its placeholder text to display the store title. However, by default the placeholder text is located at the top left of the div and is unstyled.
How can I target the placeholder text to style it??
UPDATE
Ok, maybe I should mention that I'm using WordPress. Perhaps using a simple PHP if else statement would suffice?? Show img if it exists, else show h4 element that I can add in.
Put the text into a and style it as you would for any other html element.
<div class="store-title">
This is where the store name goes.
</div>
If the text is already into an HTML element you can not modify you will have to use existing class or id to hook up to it and style it.
Of you can style the <img> element as well.
You can use line-height to vertically center:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img.no-image {
color: red;
font-size: 20px;
line-height: 200px;
text-align: center;
}
JSFiddle demo: https://jsfiddle.net/ugr6gp8n/2/
Here's another way to style alt text but it only works in Chrome so it's not recommended:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img[title] {
position: relative;
}
img[title]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: red;
line-height: 200px;
text-align: center;
content: attr(title);
}
JSFiddle Demo: https://jsfiddle.net/cxa37mLd/1/
Sources:
Can I style an image's ALT text with CSS?
Positioning image alt text
CSS :after not adding content to certain elements
Why doesn't line-height work on img elements?
You can style some properties directly on img:
img {
color:red;
font-size:20px;
text-align:center;
line-height:200px;
}
<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>
UPDATE 2
Ok this is resolved
HTML/PHP:
<?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="store-item-link" href="<?php the_permalink(); ?>">
<div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
<?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>
<h3><?php the_title(); ?></h3>
<?php else: ?>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">
<?php endif; ?>
/* Ending here */
</div>
</a>
</div>
<?php endwhile; endif; ?>
CSS
h3{
margin: 0;
font-weight: bold;
font-size: 3rem;
line-height: 175px;
text-align: center;
}
This worked great and thanks everyone for your ideas.
I need to update the css according to section_name. If section is Featured css would be right:0 and if section_name is Latest the css would be left:0 How can I inject a piece of php into css ?
<img src="square-009.jpg" style="width:300px; height:355px; position: fixed; z-index:9; right:0;" />
The section_name variable is already defined and it is working as
<?php echo $section['section_name']; ?>
Just use classes:
.Featured {
width:300px;
height:355px;
position:fixed;
z-index:9;
right:0;
}
.Latest {
width:300px;
height:355px;
position:fixed;
z-index:9;
left:0;
}
And then just populate the class dynamically:
<img src="square-009.jpg" class="<?php echo $section['section_name']; ?>" />
I want to know how to show a zoom button over an image in html when mouse hovers over it.
till now i have tried this
<img src="images/zoom.jpg" width="40" height="40" border="0" style="background:URL(http://news_image/<?php echo $getrs['image']; ?>) ;" />
But here the main problem is that how to set size of the background image and how to show the zoom.jpg when only mouse hovers it otherwise not. Also how to place the zoom.jpg in the lower right hand side of the background image when mouse hovers the background image.
I had asked this question before but i was not specific at that time but now i had tried to be specific.
Please help me in this matter.
Thanks
Somdeb
Consider this simple, clean and elegant example using minimal markup:
HTML:
<a href="#" class="zoom">
<span></span>
<img src="/path/to/image.jpg" />
</a>
CSS:
.zoom {
border: 5px solid #000;
display: inline-block;
position: relative;
}
.zoom span {
background: url(http://i.imgur.com/T7yFo.png) no-repeat;
bottom: 0;
display: block;
height: 20px;
position: absolute;
right: 0;
width: 20px;
}
img {
height: auto;
max-width: 100%;
}
If you'd rather only show the magnifying glass on :hover, change the CSS to reflect:
.zoom span {
...
display: none;
...
}
.zoom:hover span {
display: block;
right: center;
top: center;
}
This will place the zoom image in the middle of the image on :hover.
As an added bonus, you can change the mouse cursor to a custom image (e.g. a magnifying glass), further suggesting to the user that the image can be enlarged.
.zoom img:hover {
cursor: url(http://i.imgur.com/T7yFo.png), -moz-zoom-in;
}
This should do the trick:
<style>
a.image {
display: block; /* So that you can set a size. */
width: 100px;
height: 100px;
} a.image div.zoom {
display: none;
width: 100px;
height: 100px;
background-image: url(URL_TO_ZOOM_PICTURE);
background-repeat: no-repeat;
background-position: center center;
} a.image:hover div.zoom {
display: block;
}
</style>
<a class="image" href="<?php echo $getrs['image']; ?>"
style="background:URL(http://news_image/<?php echo $getrs['image']; ?>);">
<div class=".zoom"><!-- --></div>
</a>
The a tag holds the URL and the image. The zoom button is placed within the tag, and I have left it as a simple empty div tag which holds the image. Once the a tag gets hovered over, the tag will appear showing the image. The best about using this is that the zoom button can be transparent, and be placed simply in the middle of the image, and you don't have to worry about any JavaScript.
CSS:
img {
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
img:active {
-webkit-transform: scale(2);
transform: scale(2);
}
This is correct in CSS http://jsfiddle.net/8c7Vn/301/ || UP
also this CSS Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.pic{
width:50px;
height:50px;
}
.picbig{
position: absolute;
width:0px;
-webkit-transition:width 0.3s linear 0s;
transition:width 0.3s linear 0s;
z-index:10;
}
.pic:hover + .picbig{
width:200px;
}
</style>
</head>
<body>
<img class="pic" src="adam_khoury.jpg" alt="Adam">
<img class="picbig" src="adam_khoury.jpg" alt="Adam">
<img class="pic" src="heart.png" alt="heart">
<img class="picbig" src="heart.png" alt="heart">
<img class="pic" src="hardhat.jpg" alt="hardhat">
<img class="picbig" src="hardhat.jpg" alt="hardhat">
</body>
</html>
Edit: Just realized you don't want to resize the image on the page.
You will probably want something like:
<a class="ImageZoom" href="news_image/<?php echo $getrs['image']; ?>">
<img src="yourimage.ext" height="40" width="40" />
<div class="Zoom"><img src="images/zoom.jpg" /></div>
</a>
<style>
.ImageZoom{
display:block;
position:relative;
}
.ImageZoom:hover .Zoom {
display:block;
}
.Zoom {
display:none;
position:absolute
bottom:0;
right:0;
}
</style>