CODEWITHSUNDEEP
phphtmlcss
Vivek Saha
Vivek Saha

Reputation: 167

How to add border to a image when its appeared?

I have a button to choose an image and i have a space where i want to show a preview of that image. This space is just above of that button. Now I want to add a dashed border on this image and border opacity should be 0.47. But the problem is I have already inserted image tag in my code and i'm just changing the <img src=""> dynamically using JS & that is why i can see the border even before choosing an image.

I want this kind of thing:

When image is there its perfectly fine, like this:

enter image description here

But image is not there its showing a small border just above the post button, like this:

enter image description here

Here is my HTML/PHP code : 

<div>
 <div id="post-image-content">
 <div id="post-image-div">
 <img id="blah" class="post-image" alt=" " width="100" height="100"/>
 <img id="closes" class="close-button-image" src="<?php echo $this->webroot.'mainsite/img/img-close.png'?>" />
  </div>
  </div>


 <a href="#">
 <i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
 </a>
 <?php echo $this->Form->input('cover_image_url', array('type' => 'file','onchange' => 'document.getElementById(\'blah\').src = window.URL.createObjectURL(this.files[0])','style' => array("display:none"),'label' => false, 'div' => false));?>

</div>

And here is my CSS

.post-image {
    margin-bottom: 10px;
margin-left: 10px;
border-radius: 4px;
opacity: 0.5;
border: 2px dashed rgba(20, 134, 171, 0.47);
padding: 3px;


}
#post-image-content {
display: block;
overflow: hidden;
}

#post-image-div {
 position:relative;
z-index:0;
float: right;
margin: 2px 2px;

}

#post-image-div:hover .close-button-image {
    position: absolute;
right: 6px;
top: 8px;
 display: block !important; 
z-index: 1;
height: 10px;
width: 10px;
}


.close-button-image {
      position: absolute;
right: 6px;
top: 8px;
display: none;
z-index: 1;
height: 10px;
width: 10px;
}

Any help would be highly appreciated as i don't have any clue now.

Upvotes: 2

Views: 142

Answers (2)

Chaitanya Babu
Chaitanya Babu

Reputation: 1

#post-image-div{
	border: 2px dashed rgba(20, 134, 171, 0.47);
	padding:2px;
	border-radius:3px;
}

#post-image-div img,#post-image-div{
	width:100px;
	height:100px;
 
<div id="post-image-div">
    <img id="closes" class="close-button-image" src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" />
</div>

try this code

Upvotes: -1

Jigar Shah
Jigar Shah

Reputation: 6223

You can add condition before image, if no default image or img tag not needed to shown

<?php if ($image): ?>
    <img id="blah" class="post-image" alt=" " width="100" height="100"/>
<?php endif ?>

or add condition to that class only (apply required css)

<img id="blah" class="<?php echo $image ? 'post-image' : '' ?>" alt=" " width="100" height="100"/>

Upvotes: 3

Related Questions