Question

我正在尝试创建一种效果，当我将鼠标悬停在图像上时，图像会变暗（因此不透明度会下降）并显示文本。效果基本上是朝向底部：http://www.ohmy.io/。我可以自己做其中一个效果，但是两者一起进行时它们几乎互相争斗，然后变暗半秒然后再亮光。

＆＃13;

.vividworknav {
  width: 33.333%;
  height: auto;
  float: left;
  padding: 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
.vividworknav:hover .work-text-content {
  visibility: visible;
  opacity: 1.0;
}
.vividworknav:hover {
  opacity: 0.3;
}
.work-text-content {
  width: 33.333%;
  height: auto;
  visibility: hidden;
  z-index: 100;
  position: absolute;
  color: white;
  left: 0%;
  top: 25%;
  font-size: 24px;
  text-align: center;
  -webkit-transition: visibility opacity 2.0Ms;
}

＆＃13;

<div class="vividworknav">
  <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
  <div class="work-text-content">
    <p>VIVID VAPOURS</p>
  </div>
</div>

＆＃13;

Answer 1

我在父元素vividworknav中添加了黑色背景，然后我只是在悬停时设置图像和文本的不透明度，然后它似乎工作正常。

＆＃13;

    .vividworknav {
      width: 33.333%;
      height: auto;
      float: left;
      padding: 0;
      position: relative;
      background-color: black;
    }

    .vividworknav:hover img {
      opacity: 0.3;
    }

    .vividworknav:hover .work-text-content {
      opacity: 1; 
    }

    .vividworknav img {
      padding: 0;
      width: 100%;
      display: block;
      opacity: 1;
    }

    .vividworknav img,
    .work-text-content {
      -webkit-transition: opacity 0.5s ease-out;
      -moz-transition: opacity 0.5s ease-out;
      -o-transition: opacity 0.5s ease-out;
      transition: opacity 0.5s ease-out;
    }

    .work-text-content {
      position: absolute;
      color: white;
      left: 0;
      top: 25%;
      right: 0;
      bottom: 0;
      font-size: 24px;
      text-align: center;
      opacity: 0;
    }

＆＃13;

<div class="vividworknav">
  <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
  <div class="work-text-content">
    <p>VIVID VAPOURS</p>
  </div>
</div>

＆＃13;

Answer 2

StringRequest jsonObjRequest = new StringRequest(Request.Method.POST,
            getResources().getString(R.string.base_url),
            new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {

                    MyFunctions.toastShort(LoginActivity.this, response);
                }
            }, new Response.ErrorListener() {

                @Override
                public void onErrorResponse(VolleyError error) {
                    VolleyLog.d("volley", "Error: " + error.getMessage());
                    error.printStackTrace();
                    MyFunctions.croutonAlert(LoginActivity.this,
                            MyFunctions.parseVolleyError(error));
                    loading.setVisibility(View.GONE);
                }
            }) {

        @Override
        public String getBodyContentType() {
            return "application/x-www-form-urlencoded; charset=UTF-8";
        }

        @Override
        protected Map<String, String> getParams() throws AuthFailureError {
            Map<String, String> params = new HashMap<String, String>();
            params.put("username", etUname.getText().toString().trim());
            params.put("password", etPass.getText().toString().trim());
            return params;
        }

    };

    AppController.getInstance().addToRequestQueue(jsonObjRequest);

使图像变暗并在悬停时显示文本

2 个答案: