Is there a way to align the opacity in the center of an image?

Here is an example of the HTML code I have:

<div class="box">
<img src="http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg" />
</div>

I am looking for a result where the opacity decreases from the center to the border of the image. I want to achieve this effect without adding another div for an overlay image.

In order to control opacity with color, I am using CSS like this:

.box { //your css code here.
}

Thank you in advance for your assistance.

htmlcss

Answer №1

Fiddle

.unique-box {
    position: relative;
    width: 95%;
    margin: 50px auto;
}
.unique-box > img, .unique-box > div {
    max-width: 100%;
}
.unique-vignette {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(33%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
}

Answer №2

If you want to achieve an oval shape for a div, try setting a large value for the border-radius property.

To add some transparency and alpha values to this div, use the following CSS code:

.oval-div {
  width:350px;
  height:250px;
  border-radius:50%;
  background-color:blue;
  border:1px solid gray;
  opacity:0.7;
  filter:alpha(opacity=70);
}

Answer №3

Just take a peek over here

and behold this :)

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Modern browsers */
  opacity: 0.5;
}

Play around with the 0.5 values and customize the class name as per your requirements..

edit:

Sure, I'll handle it for you:

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="transparent_class"></div>
<div class="inner_circle"></div>
</body>
</html>

CSS

.transparent_class {
position:absolute;
top:0px;
left: 0px;
width:200px;
height:120px;
background-image: url("http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg");
background-size: 200px 120px;
overflow:hidden;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Modern browsers */
opacity: 0.5;
}

.inner_circle {
position:absolute;
top:0x;
left:50px;
width: 100px;
height: 100px;
background-image: url("http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg");
background-size: 200px 120px;
background-position: -50px -10px;
-moz-border-radius: 50px / 50px;
-webkit-border-radius: 50px / 50px;
border-radius: 50px / 50px;
}

JsBin

Here's the image

The rest is in your hands now.. :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the img tag showing an image from a folder, but not displaying the background-image?

Incorporating this code to showcase user uploads in a portfolio has been quite successful. However, I've run into an issue where one image (from a long list) appears blank on the page, but displays correctly on the following page when using the same p ...

phphtmlcss

What could be causing the issue with my HTML drop down menu links not functioning properly

I'm a novice in the world of web design. I recently crafted two drop-down menus for my website, one for projects and the other for labs. While the drop-down functionality itself is operational and the links are clickable, they fail to redirect users t ...

htmlcsshyperlink

Ways to showcase an image that goes beyond the top and bottom boundaries of a div using CSS

Attempting to extend an image beyond the top and bottom of a div. Successful in extending it below, but how can I achieve this effect above? Check out the online demo here. .about { background-image: linear-gradient(100deg, #483dec, #4074eb); } .abo ...

htmlcsstwitter-bootstrap-3bootstrap-4

What is the best way to implement dynamic generation of Form::date() in Laravel 8?

Is there a way to dynamically generate the Form::date() based on the selection of 1? If 1 is selected, then display the Form::date() under the Form::select(). However, if 0 is selected, then hide the Form::date() in this particular view. For example: Sel ...

javascriptphphtmlajaxlaravel-8

Detach a JQuery drag and drop element from a location without removing or concealing it

Currently working on a project that involves moving divs into a designated area, resizing them to fit the area, and then snapping them into place. Encountering an issue where when bottom items are removed from the area, they seem to "jump" up on the scree ...

javascriptjqueryhtmlcssjquery-ui

The quick way to apply rounded corners in CSS: border

Here is the CSS code I'm working with: border-radius: 50%/15px; border-top-left-radius: 10px; border-top-right-radius: 10px; I've been attempting to consolidate these values into a single border-radius property, however, I haven't had any ...

css

The Jquery code is failing to execute the AJAX GET request

I've included jQuery in my code, but despite that, it seems like my script is not functioning properly. I suspect the issue lies with how I am loading jQuery rather than with my ajax request. There are no error messages appearing and the console.log ...

javascriptjqueryhtmljson

There are three dropdown menus in my form, and the options available in each one are based on the choices made in the

I need to create a form with three dropdown menus. Each menu should display options based on the selection made in the previous one. For example, there should be dropdowns for categories, car brands, and car models. The car brand dropdown should only sh ...

phpjqueryajaxhtml

How can I connect an HTML page to an MS-Access database?

Hello everyone, I am looking to connect an HTML page to an Access database. If anyone has the HTML code for searching that database, I would greatly appreciate it. Thank you! I am using Access 2010. ...

htmldatabasems-access

Tips for preventing a figcaption from shifting the image position

I'm trying to add a figcaption to an image without moving the image from its original position due to the figcaption. Below is the CSS code I'm using for the figcaption. Here is the code for an image with a figcaption. figcaption { text-alig ...

htmlcss

What precautions should I take to safeguard my HTML/CSS/JS projects when sharing a link with my employer?

Picture this scenario: you need to share a link for your work, but you want to protect it from being easily copied or developed further by someone else. However, since it's a document, any browser can still view it. Can anyone recommend a tool that wi ...

javascripthtmlcssobfuscation

Remove a specific line from a PHP script

I have developed a system of alerts that allows users to delete an alert if they choose to do so. Below is the code for the delete button and table: <button type="button" name="Delete" Onclick="if(confirm('Are you sure you ...

phpjquerycssajaxhtml-table

Why use @media (max-width:-1) in your code?

While reviewing CSS code created by another department, I noticed an interesting media descriptor: @media (max-width:-1) { ...standard css stuff here } The value of max-width cannot be less than 0, so what could be the purpose of this? Perhaps it was ...

css

JavaScript and CSS work together to create a seamless transition of background images (part two)

Thanks to the assistance of (Jan) in my previous inquiry, I successfully tackled the issue of automatic background modification. You can view my previous question here: Automatic background change with JavaScript and CSS However, after changing the backg ...

javascripthtmlcss

Unearthing the worth of the closest button that was clicked

I am currently working on a profile management feature where I need to add students to the teacher's database. To achieve this, I am using jQuery and AJAX. However, I am encountering an issue where clicking the "add" button for each student listed on ...

javascriptjqueryhtmlajax

What is the best way to select and style individual HTML elements using CSS?

Having trouble editing a Validations Form in Ionic 4 with CSS. It seems that only the form elements are targeted after clicking on the form group. Attached below are the form states before and after click. I'm unable to style the form elements before ...

htmlcssangularionic4

Ensure that the JavaScript is loaded prior to refreshing the webpage

Below is the HTML code snippet: <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap&v=quarterly" defer></script> <script src="{% static '/javascript/maplanguage.js' %}">< ...

javascripthtmljquerydjangogoogle-maps

How to center an unnumbered list within a DIV while aligning the remaining LI items in the last row to the left

Using the latest version of Bootstrap, I am trying to create an unordered list that displays images in a grid-like format: <div id="featured-products" class="container"> <ul> <li><img src=""></li> <l ...

htmlcss

PHP code for sending email with attachment file

I have created an HTML form with the option to upload a file and send it to me via email. Additionally, I already have a PHP script that sends textbox values and text area values via email. Now, I would like the uploaded file from the form to be sent to m ...

phpjavascripthtmlformsemail

Exploring AngularJS: Extracting data from deeply nested ng-repeat structures

As a newcomer to AngularJS, I managed to create repeated forms using nested ng-repeat. However, I am struggling to figure out how to retrieve all values associated with the forms. In case you want to take a look at my revised JSFiddle: http://jsfiddle.net ...

javascripthtmlangularjs