This image overlays another image. It's added to the page with HTML generated by PHP. This is the PHP code that generates the image:
Echo '<img src="images/tick.png" id="tick' . $i .'" h1 class="hidden" style="position: absolute; top: 30px; left: 70px;"/>';
I want the image to be hidden, and I'll change it to visible when the other image is clicked. This is the CSS:
h1.visible
{
visibility: visible;
}
h1.hidden
{
visibility: hidden;
}
What am I doing wrong?
You're adding your rule to an h1 element rather than an img. And I have no idea what you tried to do with that h1 attribute inside img - get rid of it. Try
echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 30px; left: 70px;"/>';
And CSS:
img.hidden{
visibility: hidden;
}
Related
EDIT:
I came across this code:
add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'attribute_pa_'.$name;
if( $taxonomy == 'attribute_pa_staat' )
$label = $label . ' info<i class="fa fa-question"></i> ' );
return $label;
}
But it doesn't work (yet) how can I make it work?
See the page I'm trying this on here:
https://dev.pctoppers.nl/product/dell-latitude-e5550-refurbished/
End of edit
I'm trying to create an icon with a specific ID so I can link a popup to it.
I want to do this with a ::after pseudo element (if possible). We have products with different grades that we want to add an extra explanation to.
This is the code I've tried:
[data-value="a-grade"]::after {
content:"\f05a\f05a";
font-family: "Font Awesome 6 Duotone"!important;
padding:0px!important;
margin:0px!important;}
This unfortunately doesn't work and puts the icon behind the text instead of on-top of the small window its in. See screenshot below
The most ideal look would be this:
The blue circle being the icon.
Is there any way of achieving this? Keep in mind that it needs its own #ID so I can link a popup.
Thanks in advance!
With CSS property position (absolute and relative) you can make it.
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
/* Top right text */
.top-right {
font-size:2rem;
position: absolute;
top: -5px;
right: -5px;
background: red;
border-radius:40px;
height:10px;
width:10px;
}
<div class="w">
<div class="top-right">*</div>
<div class="txt">text</div>
</div>
Update with pseudo element
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
[data-value="a-grade"]::after {
content:"!";
font-family: "Font Awesome 6 Duotone"!important;
font-size:2rem;
position: absolute;
top: -15px;
right: -5px;
}
<div class="w" >
<div classs="top-right" data-value="a-grade"></div>
<div class="txt">text</div>
</div>
we can see lot of empty space in link as below the image. I want to hide those empty space.
.main {
margin: 0 auto;
width: 1000px;
}
body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
html
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';
$brandSelect .= '</select>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<span class ="cc5"> See Cases > </span>
</div>
</div>
I dont want to give so much empty space between image and below footer
please help me for this.
Thanks in advance.
Figured it out for you!
Your image of the phone cases is what is causing the space issue.
.custom_case_right img {
/*float:right;*/
/*bottom:320px;*/
}
That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this
.custom_case_right {
float:right;
margin-top:-310px;
}
These two changes ought to take care of it for you. I tested this out in Chrome.
You'll still need to think about how you want to have your image behave as your viewport shrinks though.
trying to make img:
line-height: 0;
vertical-align: top or bottom;
You have to fix the height of main-container.
enter code here.main-container{
height:550px;
}
Make this changes to your classes:
.col1-layout .col-main {
position: relative;
}
.custom_case_right {
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
And in your image remove position absolute, add this style instead:
.custom_case_right img {
position: relative;
width: 620px;
height: 100%;
}
I need an image overlay for the html I have set up. Below is my code for the "change a profile photo" upload area.
-icon_camera_128.png is the image that needs to be the hover effect.
-img class="cameraUpoad is the default profile photo.
Can someone help me out?
Thanks
<label for="fileUploadLink" class="custom-file-upload">
<div class="changeProfile">
<img src="../img/elements/icon_camera_128.png">
<img class="cameraUpload" style="width: 128px; height: 128px;" src="data:image/png;base64, <?= preg_replace("/\"/", "\\\"", base64_encode($user['avatar'])) ?>" alt="avatar">
<input id="fileUploadLink" type="file" class="filestyle" name="imageUpload" />
You can give a wrap of the images a position: relative; and and the two images (regular state and hovered state) position: absolute; while adjusting opacity of the hovered image:
JS Fiddle
Something like:
.changeProfile {
position: relative;
}
img {
position: absolute;
height: 300px;
width: 300px;
}
.cameraUpload {
opacity: 0;
transition: .4s;
z-index: 999;
}
.cameraUpload:hover {
opacity: 1;
}
I'm working in the custom-header.php file of my wordpress site and I'm trying to overlay a div containing a shortcode that produces a radio player (somewhat similar to this) on top of a div that contains an image. For some reason, despite using absolute and relative positioning and z-index, I can't seem to get it to lie on top of the image- it's consistently behind it. This is my code in custom-header.php:
<div id="headimg">
<div id="logo-image">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<div id="logo-player">
<?php echo do_shortcode('[radioforge id=1]') ?>
</div>
</div><!-- end of #logo -->
</div>
and my CSS:
#headimg #logo-image {
width: 100%;
overflow: hidden;
position: relative;
}
#headimg #logo-image img {
max-width: 100%;
height: auto;
border: none;
}
#headimg #logo-player {
position: absolute;
top: 50;
left: 50;
z-index: 10;
}
Not really sure why this isn't producing the desired result. I've tried giving #logo-image a negative z-index value as well, but that changes nothing. I know my radio player is appearing behind the image because I've set it to autoplay when the page loads and I can hear it, but for some reason I just cannot get it to sit on top. What am I doing wrong?
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.